CODEWITHSUNDEEP
javascriptowl-carousel
Stavros B
Stavros B

Reputation: 177

Thumbnail for next and previous buttons owl carousel

Does anyone know if using owl carousel we can use thumbnails of next and previous image in place of next and previous arrows.

Example: https://www.solebox.com/

if not, any other jquery slider that does this job would be really helpful information!

Upvotes: 0

Views: 5490

Answers (1)

Kakashi Hatake
Kakashi Hatake

Reputation: 3026

You could achieve above functionality from Owl Carousel 2. You have to have below custom function to show the prev, next images.

var mainSlider;

$(document).ready(function() {

  mainSlider = $('.owl-carousel');

  mainSlider.owlCarousel({
    autoplay: true,
    autoplayTimeout: 5000,
    lazyLoad: true,
    loop: true,
    items: 1,
    smartSpeed: 500,
  });

  mainSlider.on('changed.owl.carousel', function(property) {
    var current = property.item.index;
    var prev = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('data-navipicture');
    var next = $(property.target).find(".owl-item").eq(current).next().find("img").attr('data-navipicture');

    $('.navPrev').find('img').attr('src', prev);
    $('.navNext').find('img').attr('src', next);
  });

});

$('.navNext').on('click', function() {
  mainSlider.trigger('next.owl.carousel', [300]);
  return false;
});

$('.navPrev').on('click', function() {
  mainSlider.trigger('prev.owl.carousel', [300]);
  return false;
});
.navPrev {
  position: absolute;
  top: 40%;
  left: 15px;
  z-index: 2;
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}

.navPrev:hover {
  top: 39%;
  left: 8px;
  width: 118px;
  height: 118px;
  background-size: 118px 118px;
}

.navPrev span {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}

.navPrev:hover span {
  width: 118px;
  height: 118px;
}

.navPrev span img {
  position: relative;
  margin: auto 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.navPrev:hover span img {
  width: 118px;
  height: 118px;
}

.navNext {
  position: absolute;
  top: 40%;
  right: 15px;
  z-index: 2;
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}

.navNext:hover {
  top: 39%;
  right: 8px;
  width: 118px;
  height: 118px;
  background-size: 118px 118px;
}

.navNext span {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}

.navNext:hover span {
  width: 118px;
  height: 118px;
}

.navNext span img {
  position: relative;
  margin: auto 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.navNext:hover span img {
  width: 118px;
  height: 118px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />

<div class="owl-carousel">
  <div class="item">
    <a href="#"> <img src="https://placeimg.com/640/480/animals" alt="" data-navipicture="https://placeimg.com/640/480/animals">
    </a>
  </div>
  <div class="item">
    <a href="#"> <img src="https://placeimg.com/640/480/arch" alt="" data-navipicture="https://placeimg.com/640/480/arch">
    </a>
  </div>
  <div class="item">
    <a href="#"> <img src="https://placeimg.com/640/480/nature" alt="" data-navipicture="https://placeimg.com/640/480/nature">
    </a>
  </div>
</div>
<div class="navPrev">
  <span>
                <img src="https://placeimg.com/640/480/animals" alt="">
            </span>
</div>
<div class="navNext">
  <span>
                <img src="https://placeimg.com/640/480/arch" alt="">
            </span>
</div>

Upvotes: 2

Related Questions