Discussion on Strapslide - Responsive Bootstrap Slider Plugin

Grozav

Grozav supports this item

Supported

57 comments found.

Hi Alex,

Is the Slider supposed to slide with touch on IE ? It doesn’t work in IE, but it works on Firefox and Chrome. Do we miss something ? Thank you !

I know about the issue (it appeared on the last update). I’ll upload a big update tomorrow. (bug fixes, new video features). It’s going to be fine afterwards.

I want to use thumbnails for the pagination / carousel-indicators, whats the best method of doing this with your slider?

Ok one last thing, I noticed that the timers/next/prev don’t correlate with the pagination/indicators as it isn’t dependent on $current. Whats the best way to integrate it with the previous solution?

Wait I think I found a solution, thanks for the support! :D

Sorry, I went to sleep. Great to know you found a solution!

You’re welcome! If you need any more help, let me know.

I just purchased your product and I realized I still have the same problem as reported by ibreed 4 months ago. When I run IE11, I keep getting two JavaScript errors: 1) Line 6 – Object expected 2) Line 5 – Object doesn’t support this action

Also, for your information, I realized that some of the examples that came with the download are expecting for “respond.min.js” to be in the strapslide\js-bootstrap folder and yet it is not.

I was hoping to add your slider to my website asap, please let me know if/when the error above can be resolved.

Thank you.

Hi fmarto,

The first error appears in bootstrap.min.js which is loaded directly from the bootstrap website (unmodified).

The second error appears in the Vimeo API script started once the iframe is loaded.

The two errors are not caused by the strapslide script, therefore they are not mine to fix. Still, it’s safe to assume that they’re redundant errors which get replaced by a fallback, considering the slider is working without problems.

Indeed, the respond.min.js used to be there in the old version of bootstrap. I’ll make sure to update the documentation since it is no longer needed. Thank you for pointing that out!

Best regards, Alex

Thank you for letting me know, it’ll be back up in a few minutes.

Hi,

Im using Boostrap v3, when using the index-defaultv3.html it is boxed, when you make the container fluid, it makes the page have a slight horizontal scroll.

What needs to be changed to fix this please?

Hi thegamnaking,

Your .container-fluid class needs to have the following css:
padding: 0px 15px;

Alternatively, you can remove the .row div which comes right after the container-fluid, which causes the overflow.

Hello,

I’ve a template where I’m using jquery 1.9.1, can I use this slider with it?

I have tested it right now and I can confirm it is fully compatible and working with jQuery 1.9.1.

Best regards, Alex

Can I specify the width and height of the images without losing the responsive feature?

Thanks!

Hi gammada,

If you use the ‘fixedheight’ layout you can set the slider height via CSS (with media queries). The plugin will make sure the images never overflow or underflow the view. However you cannot set the height and width individually and make them smaller than the actually container width.

Hello, I bought your, plugin, that is really good. But it seems we got a problem while the slide is looping for the second time. Indeed, and you have the problem in your demo, that is really bad, the data-animation=”scaleup, fade” and “rotate” animation does not process well in the second loop of the slide.

Any idea ?

Wow, great work, Thanks you, i will test it soon and keep in touch. Thanks for the quick answer ! Best Regards.

I’ve tested, and it now works well. Thanks

Btw, i think you forgot an overflow hidden on #strapslide

The slider is looking good!

Looking at buying this slider. But does it exist an builder for the slides?

Hi bohal,

Unfortunately strapslide has no builder. However the markup is intuitive and the slider is very well documented.

Also, make sure to look at Bootslider (my newer slider) which has even more options but preset animations.

Hello,

I am relatively new to Dreamweaver and just bought and downloaded your Strapslide slider. I had previously downloaded a Bootstrap template into Dreamweaver, but I did not like their slider. Upon their suggestion, I just downloaded the Strapslide program.

I found your documentation a bit too advanced. Essentially, I am looking to embed the slider into the bootstrap template I already started working with.

Then I just need to populate the slider with images, without having to re-size each one.

Can you kindly help me?

Many thanks,

Hi HFTS,

It’s not advanced at all. Let’s see what you need to do:

  • Copy the strapslide JS files into your JS folder and the CSS files into your CSS folder.
  • Next, inside the <head> tag, copy paste the following strapslide related links:
    <link href="strapslide/css/strapslide.css" rel="stylesheet" media="screen">
    <link href="strapslide/css-bootstrap/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
      <link href="strapslide/css-bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="strapslide/css/strapslide-default.css" rel="stylesheet" media="screen" />
    <style>
    #strapslide .slider-container{ 
            height:820px; 
        }
    </style>
    
  • Next, copy the JS file sources inside your body tag, at the end, right before closing.
    <script src="http://code.jquery.com/jquery.js"></script><!-- jQuery Library -->
    <script src="strapslide/js/jquery.touchSwipe.min.js"></script><!-- Mobile Swipe Feature -->
    <script src="strapslide/js/jquery.transit.min.js"></script><!-- REQUIRED! CSS3 transitions -->
    <script src="strapslide/js/jquery.mousewheel.js"></script><!-- Mousewheel Feature -->
    <script src="strapslide/js/jquery.fitVids.js"></script><!-- Responsive Videos -->
    
    <script src="strapslide/js/strapslide.js"></script><!-- Slider Plugin -->
    
    <script src="strapslide/js-bootstrap/bootstrap.min.js"></script>
    <script src="strapslide/js-bootstrap/respond.min.js"></script>
    
    <script>
    $('#strapslide').strapslide({
            animation: "string",    //List of animations, example: "fade, rotatecw, scaleup, top" 
            speed: 1000,    //Slide animation speed
            timeout: 5000,  //Slide display time
            responsive: 'keyword',   //Responsive mode, example: 'resize', 'after', 'none'
            autoplay: boolean,       //Autoplay feature, boolean means: true / false
            preload: boolean,        //Preload feature
            pauseOnHover: boolean,   //Pause On Hover feature
            pagination: boolean,     //Pagination feature
            mousewheel: boolean,     //Mousewheel feature
            keyboard: boolean,       //Keyboard Navigation feature
            touchscreen: boolean     //Touchscreen Enabled
        }, function(){
            //callback when slide enters
        }, function(){
            //callback when slide exits
        })
    </script>
    
  • Then, we need to markup the slider.
    <!-- STRAPSLIDE -->
        <div class="strapslide" id="strapslide">
    
            <!-- PRELOADER -->
            <div class="preloader text-center">
                <img src="images/loader.gif" alt="Loading.." id="loader" />
            </div>
            <!-- /PRELOADER -->
    
            <!-- STRAPSLIDE CONTAINER -->
            <div class="strapslide-container">
    
                <!-- SLIDE -->
                <div class="slide">
                    <!-- SLIDE CONTENT -->
                    <div class="slide-content container-fluid">
    
                    </div>
                    <!-- /SLIDE CONTENT -->
                    <!-- BACKGROUND IMAGE -->
                    <img src="images/background.jpg" class="background-image" alt="" />
                    <!-- /BACKGROUND IMAGE -->
                </div>
                <!-- /SLIDE -->
    
            </div>
            <!-- /STRAPSLIDE CONTAINER --> 
    
            <!-- PROGRESS BAR -->
            <div class="row-fluid">
                <div class="span12">
                    <div class="progress progress-striped">
                        <div class="bar" style="width: 20%;" />
                    </div>
                </div>
            </div>
            <!-- /PROGRESS BAR -->
    
            <!-- NEXT-PREV NAVIGATION -->
            <div class="row-fluid strapslide-nav">
                <a class="prev btn btn-large btn-primary" href="#"><</a>
                <a class="next btn btn-large btn-primary" href="#">></a>
            </div>
            <!-- /NEXT-PREV NAVIGATION -->
    
            <!-- PAGINATION -->
            <div class="row-fluid strapslide-pagination">
                <div class="span4 offset4 text-center pagination">
                    <ul>
    
                    </ul>
                </div>
            </div>
            <!-- /PAGINATION -->
    
        </div>
        <!-- /STRAPSLIDE -->
    

Is there any way to add a pause button? Hover pause obviously doesn’t work on phones/tablets so if a movie is started on a phone or tablet, the slider just keeps going…..

Hi sortedmedia,

Thank you for pointing that out. I will update the slider and add the possibility for a pause button.

Thank you!

The slider is working great overall, but I’m trying to get it set up so the transitions area little smother. Id like slide 2 to come in from the right and have slide 1 immediately disappear instead of slowly sliding off to the left. How do I configure that?

Hi FurryLogic, Strapslide doesn’t support individual animation durations at the moment. Please contact me via Email so I can provide you with a solution. Thank you.

Hi Pixevil,

Love the slider and documentation but I can’t figure out how to change the color of the progress bar. I’m using the metro version and I already changed the navigation buttons. Can you help me with the progress bar?

Thanks in advance!

Sorry, my bad. Right after submitting this post I found the answer. Changed the bar bar-danger into bar and that was the fix.

No problem! I’m glad you managed to fix the problem. Let me know if there’s anything else I can help you with! :)

Great product, one of the best I’ve seen, awesome in fact.. but only if you can code. If you have no coding experience don’t believe for one second that this is an easy product to use. The documentation is vague and very limited, and the product very difficult to configure. I’ve wasted 2 days now and have finally been able to get text to appear on my slide, but only because I copied the author’s code, I have no idea how to get it to do what I want it to do. It could be me of course, I may be a moron perhaps. Oh well, another $11 wasted on something from the internet I’ll never use.

HI Pixevil, I’ve finally worked out how to get the text to appear one at a time, But I’m still unable to stop it from appearing with the slide background. Any help would be appreciated

Also, I’d love to know exactly what this means/does;

setTimeout(function() { $(’#slide2_text3’).fxenter(‘fade, scaleup’, 500); }, 1400); setTimeout(function() { $(’#slide2_text3’).velocity({‘scale’: 2, ‘opacity’: 0}, 100); }, 1900)

Hi chopper3280, I’m sorry for the late response. I’ve been caught up with college exams. The code you’re asking about says the following:

After 1400 milliseconds, animate #slide2_text3 to fade in and scale up with a duration of 500 milliseconds.

After 1900 milliseconds, animate #slide2_text3 to fade out and scale up with a duration of 100 milliseconds.

Velocity is a jquery plugin specialized in CSS3 animations. I recommend you look it up and use it for all animations.

This really is an outstanding product and for $11 its great value too. If you have any coding experience I cannot recommend this highly enough. Great job Pixevil!

Thank you very much chopper3280!

Hi, i recently purchased the plugin and the CSS is now all messed up on my site and the slider as well. I am using bootstrap v3 in my theme and I grabbed v3 for the CSS out of the Strapslide because the other CSS really did a number on my site. I have tried to figure out the CSS issues but still struggling.

Issues

  • My navigation does not drop down anymore
  • The pagination is all out of whack on the slider
  • Had to make the strapslide content area height important due to something was inputting a value of 0 as a style into the element. Now it is not responsive.

    #strapslide > .strapslide-container{
                      height:400px !important; 
             }
Link to the whole site to look at so I do not use up a whole page pasting code.

Also when the images fade out it the screen is blank and bright white. Is there away to make it just fade from image to image with no blank white screen in between fades?

Can you update the demo page please so I can give you further advice?

OH, I am so sorry I thought I pushed it out to the server. It is there now.

Looks very nice. Is there an option though to stop or pause a YouTube video when you navigate to the next slide? In the demo it continues playing in the background

Please check out my newest slider plugin, Slidea, which has many more features. Thank you for your interest!

by
by
by
by
by
by