Giter VIP home page Giter VIP logo

Comments (10)

biswaranjanpati avatar biswaranjanpati commented on August 22, 2024

same problem here. Can anyone suggest what's the solution?

from slider-pro.

davidghi avatar davidghi commented on August 22, 2024

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.

biswaranjanpati avatar biswaranjanpati commented on August 22, 2024
<title>Slider Pro</title> <script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="../dist/js/jquery.sliderPro.min.js"></script> <script type="text/javascript"> $( document ).ready(function( $ ) { $( '#example1' ).sliderPro({ width: 960, height: 500, arrows: true, buttons: false, waitForLayers: true, thumbnailWidth: 200, thumbnailHeight: 100, thumbnailPointer: true, autoplay: false, autoScaleLayers: false, breakpoints: { 500: { thumbnailWidth: 120, thumbnailHeight: 50 } } }); }); $( document ).ready(function( $ ) { $( '#example5' ).sliderPro({ width: 670, height: 500, orientation: 'vertical', loop: false, arrows: true, buttons: false, thumbnailsPosition: 'right', thumbnailPointer: true, thumbnailWidth: 290, breakpoints: { 800: { thumbnailsPosition: 'bottom', thumbnailWidth: 270, thumbnailHeight: 100 }, 500: { thumbnailsPosition: 'bottom', thumbnailWidth: 120, thumbnailHeight: 50 } } }); }); </script> 
<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.

biswaranjanpati avatar biswaranjanpati commented on August 22, 2024

Multiple sliders working perfectly but there is issue with thumbnails.

from slider-pro.

davidghi avatar davidghi commented on August 22, 2024

What is the issue with the thumbnails? Can you post a link?

from slider-pro.

biswaranjanpati avatar biswaranjanpati commented on August 22, 2024

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.

davidghi avatar davidghi commented on August 22, 2024

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.

EffakT avatar EffakT commented on August 22, 2024

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.

biswaranjanpati avatar biswaranjanpati commented on August 22, 2024

Thanks "davidghi", It's working fine now. Thanks a lot

from slider-pro.

davidghi avatar davidghi commented on August 22, 2024

@EffakT and other who might have the same issue please see #1

@biswaranjanpati That's great :)

from slider-pro.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.