[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3154
  • Last Modified:

Carousel with multiple rows

Dear Experts,

Is there a way to achieve a carousel with multiple rows? I want to create a horizontal carousel as in the image attached but nothing on the internet seems to do what I want.

Thanks

jQueryEg.gif
0
vbhargav80
Asked:
vbhargav80
  • 2
  • 2
1 Solution
 
Terry_focusCommented:
Can you not just use a standard carousel and adjust the container to take two images?
0
 
vbhargav80Author Commented:
I suppose that would be my only option if there is no off the shelf solution available. Any that you know of?
0
 
Terry_focusCommented:
Hi,

It will be your only option but quite simple, to save some time I have worked you up an example using the plugin found here:
http://sorgalla.com/projects/jcarousel/

The file below show the html and css changes I made. I have included a zip file of the example files

Hope that help

Terry
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;  charset=ISO-8859-1? " /> 
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript">
jQuery(function() {
    $('#mycarousel').jcarousel();
});
</script>
<link rel="stylesheet" href="css/tango/skin.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.jcarousel.css" type="text/css" />
 
 
<script type="text/javascript">
 
</script>
</head>
<body>
		  <ul id="mycarousel" class="jcarousel-skin-tango"> 
		    <li>
		    	<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />
			</li> 
		    <li>
		    	<img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />
		    	<img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />
			</li> 
		  </ul> 
</body>
</html>

<css changes to css/tango/skins.css>
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 150px; /*Change here from 75 to 150*/
}
.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 150px; /*Change here from 75 to 150*/
}
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 75px; /*Change here from 43 to 75*/
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 75px; /*Change here from 43 to 75*/
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

Open in new window

ee-example.zip
0
 
vbhargav80Author Commented:
Thanks so much for spending the time to work out a solution for me. That was really nice of you.

Regards
Varun
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now