Owl Carousel Horizontal Thumbnail Bar- add navigation

up vote
5
down vote

favorite

I have the following owl carousel with the thumbnail bar.

Technology used here,

Owl Carousel 2.3.4

Owl carousel Thumbs

$('.sv-slider .owl-carousel').owlCarousel({

  autoplay: false,

  autoplayHoverPause: true,

  dots: false,

  nav: true,

  thumbs: true,

  thumbImage: true,

  thumbsPrerendered: true,

  thumbContainerClass: 'owl-thumbs',

  thumbItemClass: 'owl-thumb-item',

  loop: true,

  navText: [

    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",

    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"

  ],

  items: 1,

  responsive: {

    0: {

      items: 1,

    },

    768: {

      items: 1,

    },

    992: {

      items: 1,

    }

  }

});

.sv-slider-item img {

  width: 100%;

  height: 200px;

}



.sv-slider .owl-thumbs {

  white-space: nowrap;

  overflow: auto;

}



.owl-thumbs button>img {

  width: 200px;

  height: 100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />











<div class="sv-slider">

  <div class="owl-carousel" data-slider-id="1">

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

  </div>

  <div class="owl-thumbs" data-slider-id="1">



  </div>

</div>

As you can see in the snippet it's working fine, but here I need a simple modification.

I want to avoid the horizontal scroll-bar for the thumbnail and add navigation icons < and > in the both ends that perform well.

asked Oct 30 at 8:13

Ramesh

1,267319

Why my questions don't get enough reach and answers? I know owl carousel is a popular language, but still no one here to answer my question
– Ramesh
Nov 4 at 3:26

Where do you need those navigation icons? On top of main carousel or on left and right of thumbs container?
– Mahbub Hasan
Nov 8 at 19:19

not familiar with owlcarousel, but it sounds that what you need is to add a carousel to your thumbnails?
– lucascaro
Nov 8 at 20:54

@MahbubHasan on left and right
– Ramesh
Nov 9 at 2:14

@lucascaro exactly sir
– Ramesh
Nov 9 at 2:14

add a comment |

up vote
5
down vote

favorite

I have the following owl carousel with the thumbnail bar.

Technology used here,

Owl Carousel 2.3.4

Owl carousel Thumbs

$('.sv-slider .owl-carousel').owlCarousel({

  autoplay: false,

  autoplayHoverPause: true,

  dots: false,

  nav: true,

  thumbs: true,

  thumbImage: true,

  thumbsPrerendered: true,

  thumbContainerClass: 'owl-thumbs',

  thumbItemClass: 'owl-thumb-item',

  loop: true,

  navText: [

    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",

    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"

  ],

  items: 1,

  responsive: {

    0: {

      items: 1,

    },

    768: {

      items: 1,

    },

    992: {

      items: 1,

    }

  }

});

.sv-slider-item img {

  width: 100%;

  height: 200px;

}



.sv-slider .owl-thumbs {

  white-space: nowrap;

  overflow: auto;

}



.owl-thumbs button>img {

  width: 200px;

  height: 100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />











<div class="sv-slider">

  <div class="owl-carousel" data-slider-id="1">

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

  </div>

  <div class="owl-thumbs" data-slider-id="1">



  </div>

</div>

As you can see in the snippet it's working fine, but here I need a simple modification.

I want to avoid the horizontal scroll-bar for the thumbnail and add navigation icons < and > in the both ends that perform well.

asked Oct 30 at 8:13

Ramesh

1,267319

Why my questions don't get enough reach and answers? I know owl carousel is a popular language, but still no one here to answer my question
– Ramesh
Nov 4 at 3:26

Where do you need those navigation icons? On top of main carousel or on left and right of thumbs container?
– Mahbub Hasan
Nov 8 at 19:19

not familiar with owlcarousel, but it sounds that what you need is to add a carousel to your thumbnails?
– lucascaro
Nov 8 at 20:54

@MahbubHasan on left and right
– Ramesh
Nov 9 at 2:14

@lucascaro exactly sir
– Ramesh
Nov 9 at 2:14

add a comment |

up vote
5
down vote

favorite

I have the following owl carousel with the thumbnail bar.

Technology used here,

Owl Carousel 2.3.4

Owl carousel Thumbs

$('.sv-slider .owl-carousel').owlCarousel({

  autoplay: false,

  autoplayHoverPause: true,

  dots: false,

  nav: true,

  thumbs: true,

  thumbImage: true,

  thumbsPrerendered: true,

  thumbContainerClass: 'owl-thumbs',

  thumbItemClass: 'owl-thumb-item',

  loop: true,

  navText: [

    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",

    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"

  ],

  items: 1,

  responsive: {

    0: {

      items: 1,

    },

    768: {

      items: 1,

    },

    992: {

      items: 1,

    }

  }

});

.sv-slider-item img {

  width: 100%;

  height: 200px;

}



.sv-slider .owl-thumbs {

  white-space: nowrap;

  overflow: auto;

}



.owl-thumbs button>img {

  width: 200px;

  height: 100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />











<div class="sv-slider">

  <div class="owl-carousel" data-slider-id="1">

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

  </div>

  <div class="owl-thumbs" data-slider-id="1">



  </div>

</div>

As you can see in the snippet it's working fine, but here I need a simple modification.

I want to avoid the horizontal scroll-bar for the thumbnail and add navigation icons < and > in the both ends that perform well.

asked Oct 30 at 8:13

Ramesh

1,267319

I have the following owl carousel with the thumbnail bar.

Technology used here,

Owl Carousel 2.3.4

Owl carousel Thumbs

$('.sv-slider .owl-carousel').owlCarousel({

  autoplay: false,

  autoplayHoverPause: true,

  dots: false,

  nav: true,

  thumbs: true,

  thumbImage: true,

  thumbsPrerendered: true,

  thumbContainerClass: 'owl-thumbs',

  thumbItemClass: 'owl-thumb-item',

  loop: true,

  navText: [

    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",

    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"

  ],

  items: 1,

  responsive: {

    0: {

      items: 1,

    },

    768: {

      items: 1,

    },

    992: {

      items: 1,

    }

  }

});

.sv-slider-item img {

  width: 100%;

  height: 200px;

}



.sv-slider .owl-thumbs {

  white-space: nowrap;

  overflow: auto;

}



.owl-thumbs button>img {

  width: 200px;

  height: 100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />











<div class="sv-slider">

  <div class="owl-carousel" data-slider-id="1">

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

  </div>

  <div class="owl-thumbs" data-slider-id="1">



  </div>

</div>

As you can see in the snippet it's working fine, but here I need a simple modification.

I want to avoid the horizontal scroll-bar for the thumbnail and add navigation icons < and > in the both ends that perform well.

$('.sv-slider .owl-carousel').owlCarousel({

  autoplay: false,

  autoplayHoverPause: true,

  dots: false,

  nav: true,

  thumbs: true,

  thumbImage: true,

  thumbsPrerendered: true,

  thumbContainerClass: 'owl-thumbs',

  thumbItemClass: 'owl-thumb-item',

  loop: true,

  navText: [

    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",

    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"

  ],

  items: 1,

  responsive: {

    0: {

      items: 1,

    },

    768: {

      items: 1,

    },

    992: {

      items: 1,

    }

  }

});

.sv-slider-item img {

  width: 100%;

  height: 200px;

}



.sv-slider .owl-thumbs {

  white-space: nowrap;

  overflow: auto;

}



.owl-thumbs button>img {

  width: 200px;

  height: 100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />











<div class="sv-slider">

  <div class="owl-carousel" data-slider-id="1">

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

  </div>

  <div class="owl-thumbs" data-slider-id="1">



  </div>

</div>

$('.sv-slider .owl-carousel').owlCarousel({

  autoplay: false,

  autoplayHoverPause: true,

  dots: false,

  nav: true,

  thumbs: true,

  thumbImage: true,

  thumbsPrerendered: true,

  thumbContainerClass: 'owl-thumbs',

  thumbItemClass: 'owl-thumb-item',

  loop: true,

  navText: [

    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",

    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"

  ],

  items: 1,

  responsive: {

    0: {

      items: 1,

    },

    768: {

      items: 1,

    },

    992: {

      items: 1,

    }

  }

});

.sv-slider-item img {

  width: 100%;

  height: 200px;

}



.sv-slider .owl-thumbs {

  white-space: nowrap;

  overflow: auto;

}



.owl-thumbs button>img {

  width: 200px;

  height: 100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />











<div class="sv-slider">

  <div class="owl-carousel" data-slider-id="1">

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">

    </div>

    <div class="sv-slider-item">

      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">

    </div>

  </div>

  <div class="owl-thumbs" data-slider-id="1">



  </div>

</div>

owl-carousel-2

asked Oct 30 at 8:13

Ramesh

1,267319

asked Oct 30 at 8:13

Ramesh

1,267319

asked Oct 30 at 8:13

Ramesh

1,267319

asked Oct 30 at 8:13

Ramesh

1,267319

asked Oct 30 at 8:13

Ramesh

1,267319

Why my questions don't get enough reach and answers? I know owl carousel is a popular language, but still no one here to answer my question
– Ramesh
Nov 4 at 3:26

Where do you need those navigation icons? On top of main carousel or on left and right of thumbs container?
– Mahbub Hasan
Nov 8 at 19:19

not familiar with owlcarousel, but it sounds that what you need is to add a carousel to your thumbnails?
– lucascaro
Nov 8 at 20:54

@MahbubHasan on left and right
– Ramesh
Nov 9 at 2:14

@lucascaro exactly sir
– Ramesh
Nov 9 at 2:14

add a comment |

Why my questions don't get enough reach and answers? I know owl carousel is a popular language, but still no one here to answer my question
– Ramesh
Nov 4 at 3:26

Where do you need those navigation icons? On top of main carousel or on left and right of thumbs container?
– Mahbub Hasan
Nov 8 at 19:19

not familiar with owlcarousel, but it sounds that what you need is to add a carousel to your thumbnails?
– lucascaro
Nov 8 at 20:54

@MahbubHasan on left and right
– Ramesh
Nov 9 at 2:14

@lucascaro exactly sir
– Ramesh
Nov 9 at 2:14

Why my questions don't get enough reach and answers? I know owl carousel is a popular language, but still no one here to answer my question
– Ramesh
Nov 4 at 3:26

Where do you need those navigation icons? On top of main carousel or on left and right of thumbs container?
– Mahbub Hasan
Nov 8 at 19:19

not familiar with owlcarousel, but it sounds that what you need is to add a carousel to your thumbnails?
– lucascaro
Nov 8 at 20:54

@MahbubHasan on left and right
– Ramesh
Nov 9 at 2:14

@lucascaro exactly sir
– Ramesh
Nov 9 at 2:14

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

I don't know Owl Carousel Thumbs, but as what @lucascaro suggested, you just use another carousel for those thumbnails, and add appropriate event handler.

Say #oc1 is your top carousel, and #oc2 is your thumbnail carousel.
You could write something like:

$('#oc2 .item').click(function () {

    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));

});

where data('slide') is some data- attribute, e.g. data-slide="1", you put in each slide of the thumbnail carousel.

Regarding to the left and right nav buttons, you write the buttons in your own HTML and attach the click events like this:

$('.left').click(function () {

    $('#oc2').trigger('prev.owl.carousel');

});

$('.right').click(function () {

    $('#oc2').trigger('next.owl.carousel');

});

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology.
– Ramesh
Nov 9 at 7:59

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53059923%2fowl-carousel-horizontal-thumbnail-bar-add-navigation%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

I don't know Owl Carousel Thumbs, but as what @lucascaro suggested, you just use another carousel for those thumbnails, and add appropriate event handler.

Say #oc1 is your top carousel, and #oc2 is your thumbnail carousel.
You could write something like:

$('#oc2 .item').click(function () {

    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));

});

where data('slide') is some data- attribute, e.g. data-slide="1", you put in each slide of the thumbnail carousel.

Regarding to the left and right nav buttons, you write the buttons in your own HTML and attach the click events like this:

$('.left').click(function () {

    $('#oc2').trigger('prev.owl.carousel');

});

$('.right').click(function () {

    $('#oc2').trigger('next.owl.carousel');

});

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology.
– Ramesh
Nov 9 at 7:59

add a comment |

up vote
0
down vote

I don't know Owl Carousel Thumbs, but as what @lucascaro suggested, you just use another carousel for those thumbnails, and add appropriate event handler.

Say #oc1 is your top carousel, and #oc2 is your thumbnail carousel.
You could write something like:

$('#oc2 .item').click(function () {

    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));

});

where data('slide') is some data- attribute, e.g. data-slide="1", you put in each slide of the thumbnail carousel.

Regarding to the left and right nav buttons, you write the buttons in your own HTML and attach the click events like this:

$('.left').click(function () {

    $('#oc2').trigger('prev.owl.carousel');

});

$('.right').click(function () {

    $('#oc2').trigger('next.owl.carousel');

});

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology.
– Ramesh
Nov 9 at 7:59

add a comment |

up vote
0
down vote

I don't know Owl Carousel Thumbs, but as what @lucascaro suggested, you just use another carousel for those thumbnails, and add appropriate event handler.

Say #oc1 is your top carousel, and #oc2 is your thumbnail carousel.
You could write something like:

$('#oc2 .item').click(function () {

    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));

});

where data('slide') is some data- attribute, e.g. data-slide="1", you put in each slide of the thumbnail carousel.

Regarding to the left and right nav buttons, you write the buttons in your own HTML and attach the click events like this:

$('.left').click(function () {

    $('#oc2').trigger('prev.owl.carousel');

});

$('.right').click(function () {

    $('#oc2').trigger('next.owl.carousel');

});

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

I don't know Owl Carousel Thumbs, but as what @lucascaro suggested, you just use another carousel for those thumbnails, and add appropriate event handler.

Say #oc1 is your top carousel, and #oc2 is your thumbnail carousel.
You could write something like:

$('#oc2 .item').click(function () {

    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));

});

where data('slide') is some data- attribute, e.g. data-slide="1", you put in each slide of the thumbnail carousel.

Regarding to the left and right nav buttons, you write the buttons in your own HTML and attach the click events like this:

$('.left').click(function () {

    $('#oc2').trigger('prev.owl.carousel');

});

$('.right').click(function () {

    $('#oc2').trigger('next.owl.carousel');

});

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

answered Nov 9 at 4:19

Siu Pang Tommy Choi

15310

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology.
– Ramesh
Nov 9 at 7:59

add a comment |

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology.
– Ramesh
Nov 9 at 7:59

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology.
– Ramesh
Nov 9 at 7:59

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl