leemark / better-simple-slideshow

Another simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

A Better Simple Slideshow

This is a fairly basic slideshow, written in javascript. This is a dual-purpose project, it's meant to be something you can drop right into your page and use if you so choose, but it's also meant as an example/tutorial script showing how to build a simple DIY slideshow from scratch on your own. Here is a tutorial/walkthrough.

Features

• fully responsive
• option for auto-advancing slides, or manually advancing by user
• multiple slideshows per-page
• supports arrow-key navigation
• full-screen toggle using HTML5 fullscreen api
• swipe events supported on touch devices (requires hammer.js)
• written in vanilla JS--this means no jQuery dependency (much 💖 for jQuery though!)

Getting Started

1. HTML markup for the slideshow should look basically like this, with a container element wrapping the whole thing (doesn't have to be a <div>) and each slide is a <figure>.

       <div class="bss-slides">
           <figure>
               <img src="path/to/img" width="100%" />
               <figcaption>Caption goes here</figcaption> 
           </figure>
   
           <!-- more figures here as needed -->
   
       </div>    

2. Include the script: js/better-simple-slideshow.min.js or js/better-simple-slideshow.js

3. Include the stylesheet css/simple-slideshow-styles.css

4. Initialize the slideshow:

   <script>
       makeBSS('.bss-slides');
   </script>

Options

To customize functionality, create an options object, then pass it into makeBSS() as the second argument, as seen below:

var opts = {
            // default selector is "figure"
            selector: ".my-selector",
            //auto-advancing slides? accepts boolean (true/false) or object
            auto : { 
                // speed to advance slides at. accepts number of milliseconds
                speed : 2500, 
                // pause advancing on mouseover? accepts boolean
                pauseOnHover : true 
            },
            // show fullscreen toggle? accepts boolean
            fullScreen : true, 
            // support swiping on touch devices? accepts boolean, requires hammer.js
            swipe : true 
        };
        
makeBSS('.bss-slides', opts);

Demo/Examples

See demo slideshows here.

Better Than What?

The name "Better Simple Slideshow" isn't meant to disparage your favorite javascript slideshow, or to imply that this is the best slideshow script out there (far from it, actually). It's just meant to be better than the earlier version that it evolved out of :)

better-simple-slideshow's Issues

reset timer when user manually advances slide

advance to next image by clicking on the current image

I am trying to use your slider for a image kiosk with a touch screen. Basically I need it to show the next image when the screen is touched anywhere. Any suggestions on how you might do this?

drag & drop photo issue

When you try to open one of the slide (image) in another tab, or when you drag & drop a slide on your desktop, it will only select the last slide as it is on top of the stack (even if not being displayed).

In order to get around this, simply add a “position : relative” on each image, and add a “z-index: 3″ for the current slide being displayed.

This will make the current slide on top of the stack and make the click work with the actual slide being displayed.

from: http://themarklee.com/2014/10/05/better-simple-slideshow/#comment-16484

README link to tutorial/walkthrough broken

The end of the README's first paragraph links to http://themarklee.com/2014/10/05/better-simple-slideshow/ but the link is broken.

Slideshow is covering up my footer

Objects above disappearing during transition

Hi Mark,

Thanks for this slideshow, it's pretty neat and perfect for my needs. The only issue I have is that I have a css drop down menu above the slide show and every time the slides change, the drop down element of the menu will disappear. It re-appears once the transition to the next slide has ended, but it's pretty frustrating. I thought it may be a z-index issue, but I've set the z-index of the drop down to 10099 and there is also a 7px area of the drop down visible above the better simple slide show element (see image).

I was wondering if you have any ideas?

Thanks

Darren

Unable to switch to fullscreen mode

Hello,
with the example number 2 it seems it's not possible switch to the fullscreen mode. The fullscreen icon only flashes over the image in the top left corner when I press Next (right) but it's not really possible to press it.

Tried this in Firefox 40.0a2 (2015-06-20) on Windows and Chrome on Android 5.x.

I hope I did not miss anything.

Stop the fade animation?

Is there a way to stop the fade and just have it be an instant switch from one image to the next, no slide or anything?

slideshow not working in IE8

Hi there, I'm wondering if you have a fix for the slideshow in IE8, doesn't look like its working in that browser. Thanks, much appreciated!

make options optional

`makeBSS()` only works with classes

It looks like makeBSS() only works to select elements by class, and not id. This actually make sense since the slideshow is vanilla.js based (not jQuery based) but it's probably worth calling out in the documentation.

Should swipe work on a laptop/desktop? Should clicking the image?

I think I have swipe turned on, but it does not work on my laptop with touch screen.

Also, should clicking in an image, or pressing a key like space bar, advance the slideshow?
(I've tried to figure out how to do this, modifying your code, but cannot)

How to convert several word docs to PDF and then print the PDF (or the Word doc) to the local default printer?

Hello...
Can someone help with this?....I found a cool script to change several word docs in a folder to PDFs......... I just wish it could print the PDF (or word doc) to the default printer also...
Here's the script I found:
'Convert .doc or .docx to .pdf files via Send To menu
Set fso = CreateObject("Scripting.FileSystemObject")
For i= 0 To WScript.Arguments.Count -1
docPath = WScript.Arguments(i)
docPath = fso.GetAbsolutePathName(docPath)
If LCase(Right(docPath, 4)) = ".doc" Or LCase(Right(docPath, 5)) = ".docx" Then
Set objWord = CreateObject("Word.Application")
pdfPath = fso.GetParentFolderName(docPath) & "" & _
fso.GetBaseName(docpath) & ".pdf"
objWord.Visible = False
Set objDoc = objWord.documents.open(docPath)
objDoc.saveas pdfPath, 17
objDoc.Close
objWord.Quit
End If
Next

Slideshow shifts to the right on website

Hello,
What do I need to change to position the slideshow correctly on the webpage... www.unitedcoachtours.com ?
the slideshow is shifted to the right...I suppose the left and right arrows should be on top of the slideshow ........

Thanks.

Cannot call functions after call makeBSS

when i call makeBSS, codes after that line don't executed

makeBSS() should return a Slideshow object

Shouldn't it?

using the slideshow in a Joomla module

I wanted to use this great slideshow on a Joomla website and I had some troubles setting it up so for those who are in the same case here is what I have done:
● added the index.php in a Jumi module (set to the banner position)
● because the class bss-slides position is set to relative, the slideshow was floating above my website (hiding the menu, and some contents) so I added a .bss-fixslider class and used @media to make it responsive (not sure if it's the best way to do it, but at least it's working!):

.bss-fixslider{
height:220px;
}
@media (min-width: 768px) and (max-width: 979px) {
.bss-fixslider{
height:150px;
}
}
@media (min-width: 480px) and (max-width: 769px) {
.bss-fixslider{
height:100px;
}
}
@media (max-width: 480px){
.bss-fixslider{
height:55px;
}
}

That's it!

Thanks a lot for sharing this slideshow, I spent quite some time looking for a slideshow that checked all my requirement and yours is the winner ! Thanks a lot!

Videos

What about support for videos?

adjust height

Nice little script, thank you! Is it possible to adjust the height of the slide for different picture-sizes? Would be enough to return the element after click on the button, so I could get the image hight of the current element and adjust the height of the bss-slide...

Add license headers

Mozilla says that to use the MPL the license headers (https://www.mozilla.org/en-US/MPL/headers/) should be included in each file: https://www.mozilla.org/en-US/MPL/2.0/FAQ/#apply