Materialize: $('.carousel').carousel('next');

Created on 11 Oct 2016  路  9Comments  路  Source: Dogfalo/materialize

How do I make it work?

Most helpful comment

Let's say you have out of the carousel element a materialize button with id 'nextButton'.

$('#nextButton').click(function() {
    $('.carousel').carousel('next');
});

All 9 comments

Make sure you:
1) Have more than one carousel item
2) Initialized the carousel via javascript: $('.carousel').carousel();

Then you can call the carousel('next')

If those 2 steps are ok, and still you cannot make it work then some code would be useful to see where the issue might be.

Roger that. How do I call carousel('next'), via function onclick?

Let's say you have out of the carousel element a materialize button with id 'nextButton'.

$('#nextButton').click(function() {
    $('.carousel').carousel('next');
});

<div class="carousel"> <?php $sql_galeria = 'SELECT * FROM galeria'; $qg = mysql_query($sql_galeria) or dir (mysql_error()); while ($qgr = (mysql_fetch_assoc($qg))) { ?> <div class="carousel-item"><a rel="prettyPhoto" href="assets/img/galeria/<?php echo $qgr['txtImagem']; ?>"><img src="assets/img/galeria/<?php echo $qgr['txtImagem']; ?>"></a></div> <?php } ?> <div class="row center"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" onclick="javascript:prev()"></i> - <i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" onclick="javascript:next()"></i></div> </div>

Then on the bottom of the page, after

$(function (next) { $('.carousel').carousel('next'); }); $(function (prev) { $('.carousel').carousel('prev'); });

Using the code you posted:
1) I would remove the onclick from both i elements. It might become hard in the future to debug all the code. If you have all the JS code in a js file you know where you have to look for it, but if you place it both in the page and in the js file you might forget where did you bind that click, etc.

Then:

$('i.fa-chevron-circle-left').click(function() {
    $('.carousel').carousel('prev');
});

$('i.fa-chevron-circle-right').click(function() {
    $('.carousel').carousel('next');
});

Works fine, but it goes one step next. If i click next agai, it goes prev.... take a look if you can
http://dev.ahcme.com.br/basebrasil

The issue is related to the position of those buttons. You should place them out of the div with the carousel class

Hummmmm.... cool. I麓ll do that. Post later.
Thanks a lot dude! You-re awesome!

WORKS! Thks again!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

locomain picture locomain  路  3Comments

ReiiYuki picture ReiiYuki  路  3Comments

alexknipfer picture alexknipfer  路  3Comments

ericlormul picture ericlormul  路  3Comments

djensen47 picture djensen47  路  3Comments