The Problem: SlidesJS 3.0 is an awesome way to spruce up your website via an impressive slideshow. It is open source, browser responsive and is even ‘swipe-ready’ for mobile use. However it contains either pagination or numbering (or both) which you may not want if you just want to display images and don’t want anyone to navigate it.
Here’s my 3 step How To. Please note THIS IS A HACK and there is probably a better way to do it.
Step 1 – Remove the ‘Previous / Next’
Open your index file, and use this script instead of the default one:
<script>
$(function(){
$("#slides").slidesjs({
play: {
active: false,
effect: "slide",
interval: 2000,
auto: true,
pauseOnHover: false,
restartDelay: 2000
},
navigation: false
});
});
</script>
Paste it here anywhere below where the img src code shows up.
Now we have removed the ‘Previous / Next’:
Step 2: Remove the numbers.
Open the included file jquery.slides.min.js on a text editor. Below I am using Notepad++
Search for the words
data-slidesjs-item":t,html:t+1
Replace it with:
data-slidesjs-item":t,/*html:t+1*/
The /* and */ will comment out where the numbers show up. Save the file and upload.
Now we’ve only got the bullet points left to remove.
Step 3: Remove the bullets.
Using Chrome (or Firebug on Firefox), right – click the bullet point and click ‘Inspect element’ to find the css the li tag is referenced with. Here you can see it’s class is ‘slidesjs-pagination-item‘
Open your css file and add:
/* removes bullet points from slideshow li*/
.slidesjs-pagination-item{
list-style-type: none;
}
That will remove the bullet points:
You’re done.
Thanks to:
