2

I want to make a subcategoy slider on the top of a category page. I have it almost, but the arrows of previous and next are under the subcategory images. I want to have it on the side of the images, beside them. Please check https://www.uitverkoopgigant.nl/wonen-slapen/tafelen/glazen.html. I have made an test slider. Here you can see the arrows at the bottom of the subcategory images. Here is the code that I made:

<div class="hot-category block">
<div class="block-title"><strong>Top Categorie</strong></div>
<div class="gird-category">
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000005100091.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Theeglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000021554938.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Koffieglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000005100091.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Theeglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000021554938.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Koffieglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000005100091.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Theeglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000021554938.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Koffieglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000005100091.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Theeglazen</span></h2>
</div>
<div class="item"><img src="{{media
url="wysiwyg/Category/Glazen/9200000021554938.jpg"}}" alt="" /><br />
<h2><span style="color: #339966;">Koffieglazen</span></h2>
</div>
<script type="text/javascript" xml="space">// <![CDATA[
//
//
jQuery(document).ready(function($) {
            var cs_slider = $(".hot-category .gird-category");
            cs_slider.owlCarousel({             
                autoplay:false,
                loop:false,
                nav : true, // Show next and prev buttons
                dots: false,
                autoplaySpeed : 500,
                navSpeed : 500,
                dotsSpeed : 500,
                autoplayHoverPause: true,
                margin:8,
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                         items:2
                    },
                    768:{
                         items:3
                    },
                    992:{
                        items:5
                    },
                    1200:{
                         items:6
                    }
                   }
            });   
        }); 
//
// ]]></script>
</div>
</div>
  • Hello can you send me css and jquery for this – Sarvesh Tiwari May 13 '19 at 5:34
  • Hello, please check answer below. That helped me to get it right. – user47444 Jun 1 '19 at 13:41
0

You can move them by following CSS

For Previous button:

.hot-category .owl-prev {
    position: absolute!important;
    top: 50%;
    left: 0%;
}

For Next button:

.hot-category .owl-next {
    position: absolute!important;
    top: 50%;
    right: 0%;
}

Note: You can adjust CSS as per requirement

| improve this answer | |
  • Where can I add this following CSS? Do I need to create a new file and where do i need to put it? I thought that i could add it on the same place. Sorry i am not familiar with it. – user47444 Jul 28 '18 at 2:41
  • For test, You can add above CSS at : pub/css/custome.css file – Pawan Jul 28 '18 at 2:56
  • I have added the code at the bottom of that file but nothing is changed. – user47444 Jul 28 '18 at 3:05
  • did you flush the cache ? – Pawan Jul 28 '18 at 3:09
  • Yes done that, but still no changes – user47444 Jul 28 '18 at 3:13