Bootstrap Carousel problem

[alexpalazofficial]

Yes! Now it works perfectly! Really, really, really thanks!

[alexpalazofficial]

Hi, there’s a new problem…

I’ve added a navbar on my website… The script works perfectly but I want that it work when I click on voices of navbar. Did you now what class can I add to the script?

If you don’t understand… Go to http://alexpalaz.altervista.org/layout/index.html resize the window, scroll down and try to click on a voice of menu…

Really thanks

[PaulOB]

Hi,

As I said before the script is getting more complicated each time (for me) but try changing the code I gave you to this:

<script>
$(document).ready(function() {
    $("body").on("click", ".right.carousel-control,.left.carousel-control,.carousel-indicators li,.myCarousel-target", function() {


        var myParent = $('#myCarousel');
        var target = myParent.find('.item.active');

        myParent.css({
                'overflow': 'hidden',
                'height': '100vh'
            }).delay(500)
            .queue(function(next) {
                next();
                myParent.css({
                    'overflow': 'auto',
                    'height': 'auto'
                });
            })
    });
});

</script>

There were 2 changes

The first was to add the new selector to the routine on the end of the first line.

.myCarousel-target

The second change was to look directly for the carousel as the nav links are no longer in the same context and closest won’t work.

var myParent = $('#myCarousel');

That’s about as best as I can do

Note that you are calling jquery twice which could give you issues. Only have oine link to jquery.

Also check the classes in your html as you have added the class attribute twice to some elements and the attribute can only exist once (although you can have multiple classnames in the attribute as space separated items).

[alexpalazofficial]

@PaulOB

$(document).ready(function() {
$(“body”).on(“click”, “.right.carousel-control,.left.carousel-control,.carousel-indicators li,.myCarousel-target”, function() {

    var myParent = $('#myCarousel');
    var target = myParent.find('.item.active');

    myParent.css({
            'overflow': 'hidden',
            'height': '100vh'
        }).delay(500)
        .queue(function(next) {
            next();
            myParent.css({
                'overflow': 'auto',
                'height': 'auto'
            });
        })
});

});

Perfect! The script works! really really thank!