Creating an Image View jCarousel Slider
Create a Image View [Procedure]
Configure the Image View to use the Juicebox slider
FORMAT
- Click on Content at Format: Unformatted list | Settings.
- Select the jCarousel option and click on Apply (all displays).
-
Complete the following in the Style Options for the Juicebox (before clicking on Apply (all displays)):
- Number of Visible items - 4
- ADVANCED Start Position - 2
Add the Image View jCarousel slider Block to your page
CSS code for jcarousel slider
Process & steps here...
.jcarousel-skin-default .jcarousel-container-horizontal {
height: auto;
width: auto;
margin: auto;
padding: 20px 40px;
}
.jcarousel-skin-default .jcarousel-clip-horizontal {
overflow: hidden;
width: auto;
}
.jcarousel-skin-default .jcarousel-item {
height: auto;
width: auto !important;
}
.jcarousel-skin-default .jcarousel-next, .jcarousel-skin-default .jcarousel-prev {
background-image: url("/sites/natural-sciences.nwu.ac.za/themes/bootstrap_nwu/arrows_jcarousel.png");
}
.jcarousel-skin-default .jcarousel-prev-horizontal {
background-position: 0 0;
position:absolute;
left: 10px;
top: 105px;
}
.jcarousel-skin-default .jcarousel-next-horizontal {
background-position: 0 -32px;
position:absolute;
right: 10px;
top: 105px;
}