Comments (10)
same problem here. Can anyone suggest what's the solution?
from slider-pro.
It's possible to use as many sliders as you want. Maybe there's something wrong in your code. I could take a look at your problem if you post some code or a link to the page.
from slider-pro.
<div id="example1" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image7_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg"/>
<p class="sp-layer sp-black sp-padding"
data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="up" data-show-delay="400" data-hide-transition="down">
Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image8_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg"/>
</div>
</div>
<div class="sp-thumbnails">
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Lorem ipsum</div>
<div class="sp-thumbnail-description">Dolor sit amet, consectetur adipiscing elit sed</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Do eiusmod</div>
<div class="sp-thumbnail-description">Tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
</div>
<div id="example5" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
<div class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg"/>
<div class="sp-caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="sp-thumbnails">
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="http://bqworks.com/slider-pro/images/image1_thumbnail.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">Lorem ipsum</div>
<div class="sp-thumbnail-description">Dolor sit amet, consectetur adipiscing</div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="http://bqworks.com/slider-pro/images/image10_thumbnail.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">Laudantium</div>
<div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
</div>
</div>
</div>
</div>
from slider-pro.
Multiple sliders working perfectly but there is issue with thumbnails.
from slider-pro.
What is the issue with the thumbnails? Can you post a link?
from slider-pro.
In line 521 :
for (var e = this.thumbnails.length - 1; e >= 0; e--)
if (0 === this.$thumbnails.find('.sp-thumbnail[data-index="' + e + '"]').length) {
......
When I change the numeric value 1 to 5, the problem solved.
Exact problem was that when we are adding number of slides in one page, The last slider's thumbnail works fine. Except that all thumbnail's position and function disturbed due to lack of class addition from Jquery. You can check itself by adding 2 slider in a page.
from slider-pro.
Actually it was something more complicated going on, which led to 'destruction' of thumbnails from previously instantiated sliders, but I fixed it and just pushed the update.
from slider-pro.
I have discovered that the problem I am encountering is due to the slider being initiated while its parent is display none, therefore it has 0 width.
from slider-pro.
Thanks "davidghi", It's working fine now. Thanks a lot
from slider-pro.
@EffakT and other who might have the same issue please see #1
@biswaranjanpati That's great :)
from slider-pro.
Related Issues (20)
- Capture event on Button Click Full Screen HOT 1
- Why your Website is Down? HOT 6
- How to change autoplayDelay value after some time HOT 1
- Transition on fullscreenchange? HOT 1
- Thumbnails and Slides scramble. HOT 1
- slides over each other when screen resolution is 1920*1080 HOT 1
- Google indexing HOT 4
- How to do when hover on thumbnail slider will change and when click thumbnail it will go to single blog HOT 8
- Center Image inside slide HOT 5
- No Event for SlideMoveComplete HOT 1
- Get Image Data HOT 1
- ES5 or ES6 Module Import HOT 1
- sliderPro is not a function HOT 5
- jQuery Minimal Library for BQ Slider Pro HOT 2
- Edge and Brave downgrading images but Chrome itself and Firefox do not HOT 1
- Is there a Vue version of slider pro? HOT 1
- Safari issue v15 HOT 1
- how to move 2 images at a time? HOT 3
- Angular component that is loading slider-pro images dynamically from a parent component? HOT 1
- random order at every page refresh HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slider-pro.