CODEWITHSUNDEEP
htmlcssshopifyowl-carousel
mowen10
mowen10

Reputation: 393

How to add space in carousel slider and only show 3 images

thanks to the following post, I was able to add owl carousel slider onto my shopify store.

owl carousel, navigation center

I followed the code within codepen and managed to display 5 images and also have the navigation at the side as required. The CSS code that i have used is the following:

http://codepen.io/anon/pen/jJAHL

/* * Owl Carousel Owl Demo Theme * v1.23 */

.owl-theme .owl-controls{
    margin-top: 10px;
    text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
    min-height: 150px;
    background: url(AjaxLoader.gif) no-repeat center center
}

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}

#owl-demo .owl-item > div{
  background : #42bdc2;
  text-align: center;
  padding:50px 0px;
  margin:3px;
  color: white;
  font-size:32px;
  border:1px white;
}

.wrapper-with-margin{
  margin:0px 50px;
}


.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}

.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -45px;
  top: 55px; 
}

.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 55px;
}
.one {
  height: 200px;
}

The only change that i would like to make is to only show 3 images but i am not sure what part of the code to change as i don't want it to affect the sizes of the image as when i have tried to add a right padding to #owl-demo .owl-item > div it reduces the size of the box.

If somebody could please advise would really appreciate it.

Thanks in advance

Upvotes: 1

Views: 1291

Answers (1)

Robert White
Robert White

Reputation: 96

The best method is to use the responsive option in owlCarousel then you can set your break points and number of images you'll show. See the docs here: http://www.owlcarousel.owlgraphic.com/demos/responsive.html

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:3,
            nav:true,
            loop:false
        }
    }
})

Upvotes: 1

Related Questions