simple jQuery image slider...

vrufusx65v · Jan 27, 2011

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 · Jan 27, 2011

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 · Jan 31, 2011

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

Code:

    <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

Code:

.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 · Jan 31, 2011

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

No need to re-invent the wheel

kreator12 · Feb 1, 2011

you may look at this example:

http://www.slidesjs.com/

it's quite simple and it's free too

vrufusx65v · Feb 1, 2011

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>

Code:

<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

Code:

<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

Code:

.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 · Feb 1, 2011

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

vrufusx65v · Feb 2, 2011

http://toddyoungart.shotsoundstudios.net/

diabolo · Feb 2, 2011

@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 · Feb 3, 2011

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

er.rohittank22 · Feb 5, 2011

<head>
<style>
.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;
}
</style>
</head>
<body>
<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>
<a href="#" id="prev"></a>
<a href="#" id="next1"></a> 
</div>
</body>

simple jQuery image slider...

vrufusx65v

New Member

cybrax

Community Advocate

vrufusx65v

New Member

cybrax

Community Advocate

kreator12

New Member

vrufusx65v

New Member

diabolo

Community Advocate

vrufusx65v

New Member

diabolo

Community Advocate

tarunaac90

New Member

er.rohittank22

New Member

Free Web Hosting

Our Community

Legal