What's wrong with my navigation? Bullets, Numbers and text, not arrows and dots

[Mark Pompey]

I am new to this. I found this through a search on Adobe (Dreamweaver) Help.

 

I am creating a slideshow for my daughter's pictures. I put the scripts in and modified the page with the code provided in the explanation page. The NEXT and PREVIOUS text work, but I want to have the arrows and dots that show up in the sample.

 

I am looking at a couple of related posts, but not understanding where the optional code should go.

 

Here is my first attempt at getting this going: http://samanthapompey.com/sample_cp.html

 

Thanks

[Mark Bubel]

Hello, 

I looked at your page; your slideshow is functioning normally. The "dots" and "arrows" you see in the sample are actually images that replace the text "next" and "previous", or the list of bullets (1 through 10) that you have. If you have html/css knowledge, you can modify the pagination generated by the script and remove the bullets from the 1 through 10 list or add/remove the text from next/previous.

Just put all CSS modifications in your style sheet. You don't need to change the slides.js code. In order for you to know which CSS classes/ids to target, you'll need to look at code generated by the slideshow script. If you use Google Chrome, the Chrome Dev Tools are super helpful. 

Hopefully this clears up some questions!

[Mark Pompey]

Thanks for the information. It makes sense, but I am new to all this. I know I need to know this, but for now, I am still trying to determine what code to use and where it should be placed. I am using some other pages as examples, but I am not having much luck. 

[Mark Bubel]

Can you be specific with what you need   Help ?

--
You received this message because you are subscribed to a topic in the Google Groups "SlidesJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/slidesjs/PyqfFmVxGvg/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to slidesjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Mark Pompey]

I am looking for code that I can put into my CSS and what needs to be modified in the .html file to take advantage of that code. I want to eliminate the listing below the slide show. I want to have either arrows or dots for navigation. 

[sa...@mobywrap.com]

Make sure you have uploaded the images for the next/back buttons, they should have been included in files you downloaded. Then add this code to in-between the <style> tags on the site. This will give you the carrots instead of words. 

  a.slidesjs-next,

    a.slidesjs-previous,

    a.slidesjs-play,

    a.slidesjs-stop {

      background-image: url(/images/btns-next-prev.png);

      background-repeat: no-repeat;

      display:block;

      width:12px;

      height:18px;

      overflow: hidden;

      text-indent: -9999px;

      float: left;

      margin-right:5px;

    }

    a.slidesjs-next {

      margin-right:10px;

      background-position: -12px 0;

    }

    a:hover.slidesjs-next {

      background-position: -12px -18px;

    }

    a.slidesjs-previous {

      background-position: 0 0;

    }

    a:hover.slidesjs-previous {

      background-position: 0 -18px;

To get rid of the numbers add this line:

 pagination: false

to the the <script> tag right below height: 528 and add a comma after the 528. It should end up looking like this:

<script>
	$(function(){
	$("#slides").slidesjs({
	width: 940,
	height: 528, pagination: false
	});
	});
	</script>