javascript - Vertical slider with horizontal slides with jQuery - Stack Overflow

admin管理员组

文章数量:1021921

I have a product that has multiple images. on top or bottom click I want to change the product. and on click next and prev I want to change that product images.

this is my HTML format

<div class="product" id="1">
    <div class="product_img" id="1_0"><img src=""/></div>
    <div class="product_img" id="1_1"><img src=""/></div>
    <div class="product_img" id="1_2"><img src=""/></div>
</div>
<div class="product" id="2">
    <div class="product_img" id="2_0"><img src=""/></div>
    <div class="product_img" id="2_1"><img src=""/></div>
    <div class="product_img" id="2_2"><img src=""/></div>
</div>
<div class="product" id="3">
    <div class="product_img" id="3_0"><img src=""/></div>
    <div class="product_img" id="3_1"><img src=""/></div>
    <div class="product_img" id="3_2"><img src=""/></div>
</div>

How to implement with JavaScript or jquery? is there any plugin? any suggestion will be helpful.

I have a product that has multiple images. on top or bottom click I want to change the product. and on click next and prev I want to change that product images.

this is my HTML format

<div class="product" id="1">
    <div class="product_img" id="1_0"><img src=""/></div>
    <div class="product_img" id="1_1"><img src=""/></div>
    <div class="product_img" id="1_2"><img src=""/></div>
</div>
<div class="product" id="2">
    <div class="product_img" id="2_0"><img src=""/></div>
    <div class="product_img" id="2_1"><img src=""/></div>
    <div class="product_img" id="2_2"><img src=""/></div>
</div>
<div class="product" id="3">
    <div class="product_img" id="3_0"><img src=""/></div>
    <div class="product_img" id="3_1"><img src=""/></div>
    <div class="product_img" id="3_2"><img src=""/></div>
</div>

How to implement with JavaScript or jquery? is there any plugin? any suggestion will be helpful.

• javascript
• php
• jquery
• html
• css

Share Improve this question Follow edited Dec 1, 2021 at 16:20 Bhautik asked Jan 16, 2017 at 17:25 BhautikBhautik 11.3k33 gold badges1818 silver badges4040 bronze badges 2

• i tried owl carousel js. but it's only provide horizontal slider – Bhautik Commented Jan 16, 2017 at 17:32
• try Fullpage.js, I've also modified one of their example in codepen to demo this. Link here – Aminur Rashid Commented Jan 16, 2017 at 18:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

you should check out swiper. http://idangero.us/swiper/#.WH0PsrYrKA0.

In the demos you can check out the "nested" slider http://idangero.us/swiper/demos/#.WH0PybYrKA0.

Ive used this in a couple applications. Super slick

I have a product that has multiple images. on top or bottom click I want to change the product. and on click next and prev I want to change that product images.

this is my HTML format

<div class="product" id="1">
    <div class="product_img" id="1_0"><img src=""/></div>
    <div class="product_img" id="1_1"><img src=""/></div>
    <div class="product_img" id="1_2"><img src=""/></div>
</div>
<div class="product" id="2">
    <div class="product_img" id="2_0"><img src=""/></div>
    <div class="product_img" id="2_1"><img src=""/></div>
    <div class="product_img" id="2_2"><img src=""/></div>
</div>
<div class="product" id="3">
    <div class="product_img" id="3_0"><img src=""/></div>
    <div class="product_img" id="3_1"><img src=""/></div>
    <div class="product_img" id="3_2"><img src=""/></div>
</div>

How to implement with JavaScript or jquery? is there any plugin? any suggestion will be helpful.

I have a product that has multiple images. on top or bottom click I want to change the product. and on click next and prev I want to change that product images.

this is my HTML format

<div class="product" id="1">
    <div class="product_img" id="1_0"><img src=""/></div>
    <div class="product_img" id="1_1"><img src=""/></div>
    <div class="product_img" id="1_2"><img src=""/></div>
</div>
<div class="product" id="2">
    <div class="product_img" id="2_0"><img src=""/></div>
    <div class="product_img" id="2_1"><img src=""/></div>
    <div class="product_img" id="2_2"><img src=""/></div>
</div>
<div class="product" id="3">
    <div class="product_img" id="3_0"><img src=""/></div>
    <div class="product_img" id="3_1"><img src=""/></div>
    <div class="product_img" id="3_2"><img src=""/></div>
</div>

How to implement with JavaScript or jquery? is there any plugin? any suggestion will be helpful.

• javascript
• php
• jquery
• html
• css

Share Improve this question Follow edited Dec 1, 2021 at 16:20 Bhautik asked Jan 16, 2017 at 17:25 BhautikBhautik 11.3k33 gold badges1818 silver badges4040 bronze badges 2

• i tried owl carousel js. but it's only provide horizontal slider – Bhautik Commented Jan 16, 2017 at 17:32
• try Fullpage.js, I've also modified one of their example in codepen to demo this. Link here – Aminur Rashid Commented Jan 16, 2017 at 18:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

you should check out swiper. http://idangero.us/swiper/#.WH0PsrYrKA0.

In the demos you can check out the "nested" slider http://idangero.us/swiper/demos/#.WH0PybYrKA0.

Ive used this in a couple applications. Super slick

本文标签： javascriptVertical slider with horizontal slides with jQueryStack Overflow