simple jQuery image slider...

[vrufusx65v]

I'm trying to make or even find a nice jQuery slider that is very simple. Just a previous and next button, and the ability to slide 5 pictures at a time. The attached image is what i want the slider to look like.



I already made the "recent paintings" header and both the horizontal rules within HTML, its just within the horizontal rule that i need made as the actual jQuery Slider. i also have both arrow buttons as well.

Can you help another human being out, please?

[cybrax]

You don't need a human being, you need Google

There are dozens of javascript slideshows out there, all fully documented. If you get stuck I recomend a visit to DynamicDrive.com. The instructions cannot get much simpler but they do have their own forum providing support in this specialised field.

[vrufusx65v]

okay, I've made the slider exactly like it is in the picture, i just need the JavaScript/jQuery that makes it slide 5 pictures at a time. I have looked at dynamicDrive, i have googled, Bing'd, Yahoo'd and everything else, i cant find a slider that does the same thing as mine. I found "sub carousels" that do what i want this slider to do but it's not coded the right way to make mine move correctly. if someone could just make the JavaScript file for me, or even point me in the right direction for a tutorial that would show me how to make use of proper JavaScript jQuerying techniques, i'd greatly appreciate it.

Here's the HTML & CSS i've done to make it the way i'd like it, i just need to make the javascript/jQuery file to move 5 pictures at a time then loop back to the first set of 5 pictures.

*NOTE* for some reason when i added the HTML code it replaces my original img src with "<img src="http://x10hosting.com/forums/images/pics/1.png" />". dont know why...

HTML

    <div class ="paintslider">
    	<div class="pics">
        	<img src="http://x10hosting.com/forums/images/pics/1.png" />
	       	<img src="http://x10hosting.com/forums/images/pics/2.png" />
		<img src="http://x10hosting.com/forums/images/pics/3.png" />
		<img src="http://x10hosting.com/forums/images/pics/4.png" />
		<img src="http://x10hosting.com/forums/images/pics/5.png" />
        	<img src="http://x10hosting.com/forums/images/pics/1.png" />
	       	<img src="http://x10hosting.com/forums/images/pics/2.png" />
		<img src="http://x10hosting.com/forums/images/pics/3.png" />
		<img src="http://x10hosting.com/forums/images/pics/4.png" />
		<img src="http://x10hosting.com/forums/images/pics/5.png" />
        	<img src="http://x10hosting.com/forums/images/pics/1.png" />
	       	<img src="http://x10hosting.com/forums/images/pics/2.png" />
		<img src="http://x10hosting.com/forums/images/pics/3.png" />
		<img src="http://x10hosting.com/forums/images/pics/4.png" />
		<img src="http://x10hosting.com/forums/images/pics/5.png" />
        	<img src="http://x10hosting.com/forums/images/pics/1.png" />
	       	<img src="http://x10hosting.com/forums/images/pics/2.png" />
		<img src="http://x10hosting.com/forums/images/pics/3.png" />
		<img src="http://x10hosting.com/forums/images/pics/4.png" />
		<img src="http://x10hosting.com/forums/images/pics/5.png" />
        	<img src="http://x10hosting.com/forums/images/pics/1.png" />
	       	<img src="http://x10hosting.com/forums/images/pics/2.png" />
		<img src="http://x10hosting.com/forums/images/pics/3.png" />
		<img src="http://x10hosting.com/forums/images/pics/4.png" />
		<img src="http://x10hosting.com/forums/images/pics/5.png" />                                    
        </div><!-- End Pictures -->
        <a href="#" id="prev"></a>
        <a href="#" id="next1"></a> <!-- I have another picture slider before this one so i have another next button that already takes an ID of "Next"-->
    </div><!-- End Paint Slider -->

CSS

.paintslider {
	margin:0 auto;
	width:900px;
	height:140px;
	margin-top:30px;
}


img{
	display: block;
}

.pics{
	float:left;
	width:900px;
	height:120px;
	overflow:hidden;
	margin-left:50px;
}

.pics img{
	float:left;
	height:100px;
	width:150px;
	margin-top:30px;
	margin-left:10px;
	padding-bottom:50px;
}

#prev{
	float:left;
	display: block;
	width: 30px;
	height: 27px;
	background: url(../images/left-arrow.png);
	margin-top:-60px;
}

#next1{
	float:right;
	display: block;
	width: 30px;
	height: 26px;
	background: url(../images/right-arrow.png);
	margin-top:-60px;
}

.clear{
	clear: both;
}

[cybrax]

http://sorgalla.com/projects/jcarous...ic_simple.html

No need to re-invent the wheel

[kreator12]

you may look at this example:

http://www.slidesjs.com/

it's quite simple and it's free too

[vrufusx65v]

im using the jCarousel right now, and i dont think im doing it right. I know "how could you screw up such a simple jQuery script?" well im not well versed in the ways of Javascript/jQuery code. i have followed directions to a "T" at their SITE and for some reason it just wont work properly. I'll get the pictures but they just stack ontop of each other and dont move, the script is supposed to auto-generate the Prev and Next buttons to but they dont work either.

What am i doing wrong? I'm making just a simple left to right horizontal slider with a loop back to the front?

javascript placed in <head>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
		scroll: 5,
		vertical:false,
		rtl:true,
		offset: 1,
		wrap:"circular",
		buttonNextHTML: <div id="next1"></div>,
		buttonPrevHTML: <div id="prev"></div>,
		buttonNextEvent: "click",
		buttonPrevEvent: "click",
    });
});
</script>

HTML

<div class ="paintslider">
    	<ul id="mycarousel" class="jcarousel-skin-tango">
		<li><img src="images/pics/1.png" width="150" height="100" /></li>
	        <li><img src="images/pics/2.png" width="150" height="100" /></li>
	        <li><img src="images/pics/3.png" width="150" height="100" /></li>
		<li><img src="images/pics/4.png" width="150" height="100" /></li>
		<li><img src="images/pics/5.png" width="150" height="100" /></li>
                <li><img src="images/pics/1.png" width="150" height="100" /></li>
	        <li><img src="images/pics/2.png" width="150" height="100" /></li>
		<li><img src="images/pics/3.png" width="150" height="100" /></li>
		<li><img src="images/pics/4.png" width="150" height="100" /></li>
  	</ul>
</div>

CSS

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
	direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
	margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

[diabolo]

Do you have a link to a demo page I can look at?

[vrufusx65v]

http://toddyoungart.shotsoundstudios.net/

[diabolo]

@vrufusx65v - The code you provided here is correct, but it does not correspond with that on your website. Also, I noted that you did not include the jCarousel source file [../path/to/lib/jquery.jcarousel.min.js]

[tarunaac90]

I'm still loving marquee text or image for slides efect :D