I am trying to use CarouFredSel for to display different images in a div which needs to be hidden in the beginning and visible when some button is clicked later. But its not working as i expected.But when i set the div to visible in the beginning, then I can hide and show this div without problem. So I am looking if someone can help me solve the problem hiding and showing CarouFredSel div.
.wrapper {
background-color: white;
width: 92%;
margin: 10px auto;
padding: 50px;
box-shadow: 0 0 5px #999;
display:none;
}
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 30px;
width: 95%;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
width: 140px;
height: 42px;
padding: 0;
margin-left: 3px;
margin-right: 3px;
margin-top: 6px;
margin-bottom: 6px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
<body>
<div class="wrapper">
<div class="list_carousel">
<ul id="foo2">
<li>
<img src="images/itcells.png" s alt="" />
</li>
<li>
<img src="images/itcells.png" alt="" />
</li>
<li>
<img src="images/itcells.png" alt="" />
</li>
<li>
<img src="images/itcells.png" alt="" />
</li>
<li>
<img src="images/itcells.png" alt="" />
</li>
</ul>
<div class="clearfix"></div> <a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next"
href="#">></a>
</div>
<br />
</div>
<input type="button" id="hide" />
<input type="button" id="show" />
</body>
$(document).ready(function () {
$('#show').click(function () {
$(".wrapper").animate({
"opacity": "show"
}, 1000);
});
$('#hide').click(function () {
$(".wrapper").animate({
"opacity": "hide"
}, 1000);
});
});
$(function () {
//Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
});
Please help me to show and hide the div.
To make this work I have change a few things (with working jsFiddle example, link after tutorial):
This is the result.
<div class="wrapper">
<ul id="foo2">
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
<li><img src="http://placehold.it/100x100"/></li>
</ul>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
</div>
<input type="button" id="hide" value="hide" />
<input type="button" id="show" value="show" />
.wrapper {
height: 100px;
position: relative;
background - color: white;
margin: 10px auto;
padding: 50px;
box - shadow: 0 0 5px #999;display:none;}
.clearfix {float: none;clear: both;}
.prev {position: absolute;z-index: 9;top: 50%;left:10px;}
.next {position: absolute;z-index: 9;top: 50%;right:10px;}
# foo2 {margin: 0;padding: 0;}
#foo2 li {
display: block;
float: left;
height: 100px;
text - align: center;
width: 100px;
color: #8cabbf;display: block;}
# foo2 li img {border: 1px solid#dfe9ee;}
$(document).ready(function () {
$('#show').click(function () {
$(".wrapper").animate({
"opacity": "show"
}, 1000);
generateCarousel();
});
$('#hide').click(function () {
$(".wrapper").animate({
"opacity": "hide"
}, 1000);
});
function generateCarousel() {
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
}
});