58 comments found.
Good luck with your sales
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!
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; }
Hi justawebbie,
You should be including bootstrap AFTER including jquery. That’s the reason why things stopped working.
Also make sure at least one slide has the ‘active’ class set.
Best regards, Alex
Okay that is working but why did my dropdown menu stop working and the pagination for the strapslide get all messed up.
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.
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!
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.
Thank you for the purchase, chopper3280. I’m sorry you feel like that. If there’s anything specific you don’t understand and would like to know, please don’t hesitate to leave a message.
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.
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! 
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.
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!
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 -->
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 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 ?
Hi shad0ko,
Thank you for the heads up! I will look into it as soon as I’m back from my holiday trip. Seems like I messed the code up in the last update somewhere. I’ll let you know when the update is live.
Best regards, Alex
An update is on the way.
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
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’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
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.
Demo is Down…
Thank you for letting me know, it’ll be back up in a few minutes.
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
I want to use thumbnails for the pagination / carousel-indicators, whats the best method of doing this with your slider?
Hi Revery123,
Here’s a solution: Inside the strapslide.js file, inside the function, define the following:
//0 first slide
//n-1 last slide
$('[data-gotoslide]', $this).click(function() {
var gotoindex = $(this).attr('data-gotoslide');
gotoslide(gotoindex);
});
Then you can slide to whichever slide you want using data tags. For example:
<a href="javascript:void(0);" data-gotoslide="0">Go to slide 1</a>
Thanks! Also, how do should I go about adding a “active” class to thumbnails?
$('[data-gotoslide]', $this).click(function() {
$('[data-gotoslide]', $this).removeClass('active');
$(this).addClass('active');
var gotoindex = $(this).attr('data-gotoslide');
gotoslide(gotoindex);
});
This will add the active class to the clicked item. Enjoy!
Thanks again!
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! 
Sorry, I went to sleep. Great to know you found a solution!
You’re welcome! If you need any more help, let me know.
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.
Hi Alex,
I have the same question as Pixilpusher, can the slider stop sliding even when the user isn’t hovering when a video is playing, but then with a Vimeo video. Could you look into that too?
Thanks!
Tim
Of course, I’ve already got it done for youtube, currently working on vimeo. Update will be early next week.
Hello, We have a query. When a video is playing in the slider, is there a way for the slide not to change with out having to stay hovered on the slide?
Thanks
Hi pixilpusher,
I’ll include an feature for that on the next update. I’ll have to add the YouTube API to the plugin.
Best regards, Alex
Any idea when the next release will be?
Hey, I currently have some important college exams, so it’s a very busy period for me. I’ll get back to updating my products afterwards (in approximately 2 weeks).
Thank you for understanding!
