CarouFredSel:Show hide div issue

caroufredsel, hide, html, jquery, show

Solution

To make this work I have change a few things (with working jsFiddle example, link after tutorial):

- Remove an unused DIV

- Update and clean CSS Style

- Improved Carousel settings: with items, visible and scroll

- Convert Carousel in function

- Added values to the buttons

- Added Placehold.it images for visual example

- Updated Show and Hide functions to show Carousel

This is the result.

HTML

<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="#">&lt;</a>
       <a id="next2" class="next" href="#">&gt;</a>
 </div>         
 <input type="button" id="hide" value="hide" />
 <input type="button" id="show" value="show" />

CSS

.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;}

JAVASCRIPT

$(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
            }
        });
    }
});

Here is a working demo.

Problem

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. The CSS: ``` .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; } ``` The html to display CarouFredSel is like this: ``` <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="#">&lt;</a> <a id="next2" class="next" href="#">&gt;</a> </div> <br /> </div> <input type="button" id="hide" /> <input type="button" id="show" /> </body> ``` The jquery call is as below: ``` $(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.

Original source