simple jQuery image slider...

vrufusx65v

New Member
Messages
74
Reaction score
0
Points
0
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.

jQuery-Slider.jpg

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? :cool:
 

cybrax

Community Advocate
Community Support
Messages
764
Reaction score
27
Points
0
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.
 
Last edited:

vrufusx65v

New Member
Messages
74
Reaction score
0
Points
0
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;
}
 
Last edited:

vrufusx65v

New Member
Messages
74
Reaction score
0
Points
0
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

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
Do you have a link to a demo page I can look at?
 

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
@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]
 

er.rohittank22

New Member
Messages
4
Reaction score
0
Points
0
<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><!-- 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 -->
</body>
 
Top