CODEWITHSUNDEEP
javascriptjqueryhtmlcsstransition
user4075462
user4075462

Reputation: 115

bxslider change width onclick

I have a menu next to my bxslider which i can slide in and out. Therefore my slider is going to resize itself. When I do this bxslider is either hiding parts of my images or showing already parts of the next slide.

I solved this by destroying and reloading the slider. I need to wait until the css transition is finished otherwise it doesn't work but it looks pretty strange now. Is there another solution for my problem?

edit: I would like it too look like when you resize the window with the responsive slider. So no jumping transitions.

http://jsfiddle.net/r6fvg3ov/2/

<section id="work">
<div id="navigation" class="hidden"> 
    <a href="javascript:;" id="menu-btn" class="menu-btn"><span></span></a>

    <ul class="main">
        <li><a data-slide-index="2">men1</a>

            <ul class="sub1">
                <li><a data-slide-index="1">men2.1</a>

                    <ul class="sub2">
                        <li><a data-slide-index="1">men2.1.1</a>

                        </li>
                        <li><a data-slide-index="2">men2.1.2</a>

                        </li>
                        <li><a data-slide-index="0">men2.1.3</a>

                        </li>
                    </ul>
                </li>
                <li><a data-slide-index="1">men2.2</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
<div id="slider" class="full">
    <div class="gallery">
        <ul class="bxslider">
            <li>
                <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/houses.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/trees.jpg" />
            </li>
        </ul>
    </div>
</div>
</section>

this is my solution so far:

 $(document).ready(function () {
 var slider = $('.bxslider').bxSlider({
     pagerCustom: '#navi',
 });

 $('#menu-btn').click(function () {
     $('#navigation').toggleClass('visible');
     $('#navigation').toggleClass('hidden');
     $('#slider').toggleClass('resized');
     $('#slider').toggleClass('full');
     setTimeout(function () {
         slider.destroySlider();
         slider.reloadSlider();
     }, 500);

 });

});

thank you for your help!

Upvotes: 1

Views: 1155

Answers (3)

kartsims
kartsims

Reputation: 1008

Thanks for the jsfiddle.

I don't think you can do this... You are mixing two different and independant concepts : JS resizing and CSS transitions.

You might achieve to synchronize them (poorly) by setting the same animation time as the css transition time, but this doesn't sound like a good solution to me.

I would drop the css transitions and use a full JS solution. This won't look great when you resize the window manually but you may end up with a nice resizing animation when the menu appears/disappears...

Upvotes: 0

Manas Atabaev
Manas Atabaev

Reputation: 16

jsfiddle

 $(document).ready(function () {
 var slider = $('.bxslider').bxSlider({
     pagerCustom: '#navi'
 });

 $('#menu-btn').click(function () {
     $('#navigation').toggleClass('visible');
     $('#navigation').toggleClass('hidden');
     $('#slider').toggleClass('resized');
     $('#slider').toggleClass('full');
     $('#navigation').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', 
         function(e) { slider.redrawSlider();
     });
 });

});

Upvotes: 0

Jevgeni
Jevgeni

Reputation: 2574

JSFiddle does not load for me atm., but I think this should do the job:

    $('#slider')
            .toggleClass('resized')
            .toggleClass('full')
            .on('oanimationend animationend webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd mozAnimationEnd MSAnimationEnd',function(){
        slider.destroySlider();
        slider.reloadSlider();
    })

Just run .on('...') event listener on the DOM object being animated (in your case it's $('#slider') I believe)

Upvotes: 1

Related Questions