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>

closed as off-topic by liyakat, Piyush, Priyank, Mohit Kumar Arora, Manashvi Birla Jul 30 '18 at 5:58

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions describing a problem that can't be reproduced OR seemingly went away on its own (or went away when a typo was fixed) are off-topic as they are unlikely to help future readers." – liyakat, Piyush, Priyank, Mohit Kumar Arora, Manashvi Birla
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hello can you send me css and jquery for this – Sarvesh Tiwari May 13 at 5:34
  • Hello, please check answer below. That helped me to get it right. – Anushka27 Jun 1 at 13:41
1

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

  • 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. – Anushka27 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. – Anushka27 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 – Anushka27 Jul 28 '18 at 3:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.