Как сделать несколько одинаковых слайд шоу на странице

oke11o · August 30, 2011

Здравствуйте. Подскажите новичку. Воспользовался этим примером слайд шоу. http://jquery.malsup.com/cycle/basic.html

Но если сделать несколько блоков <div class="slideshow"> слайдшоудит только первый. Остальные вываливает простыми картинками. Как быть?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
});
</script>
</head>
<body>
        <div class="slideshow">
                ......
        </div>
        <div class="slideshow">
                ......
        </div>
        <div class="slideshow">
                ......
        </div> 
</body>

Great Rash · August 30, 2011

Как быть?

Искать другой плагин.

psywalker · August 30, 2011

Как быть?
Искать другой плагин.

Или просто написать самому эту галерею, на чистом JS.

oke11o · August 30, 2011

Я попытался воспользоваться вот таким фильтром:

$('div [id=slideshow]').cycle({

Тогда слайдятся все блоки, но в хорме и опере они наехали друг на друга.

Great Rash · August 30, 2011

Плагин написан с ошибкой, ищите другой.

mishka · August 30, 2011

классный плагин, никаких ошибок.

jQuery('.slideshow').each(function() {
    jQuery(this).cycle();
})

oke11o · August 30, 2011

классный плагин, никаких ошибок.
jQuery('.slideshow').each(function() {
jQuery(this).cycle();
})

Mishka, это куда писать?

Edited August 30, 2011 by oke11o

mishka · August 30, 2011

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').each(function() {
        $(this).cycle();
    })
});
</script>
</head>
<body>
        <div class="slideshow">
                ......
        </div>
        <div class="slideshow">
                ......
        </div>
        <div class="slideshow">
                ......
        </div> 
</body>

Great Rash · August 30, 2011

классный плагин, никаких ошибок.

А по-моему ошибка на лицо. Вот тут я писал, что создатель jQuery учит делать .each() сразу внутри плагина, чтобы потом не было вопросов как у ТС.

mishka · August 30, 2011

классный плагин, никаких ошибок.
А по-моему ошибка на лицо. Вот тут я писал, что создатель jQuery учит делать .each() сразу внутри плагина, чтобы потом не было вопросов как у ТС.

все же лучше применить each чем искать другой плагин. Этот плагин очень даже функциональный, и здорово работает.

Great Rash · August 30, 2011

Ну может быть. Не увидел никаких особенных функций на демо-страничке.

mishka · August 30, 2011

http://jquery.malsup.com/cycle/

там еще внизу линки на другие странички с примерами.

oke11o · August 30, 2011

		<script type="text/javascript">
		$(document).ready(function() {
			$('.slideshow').each(function() {
				$(this).cycle();
			});
		});
		</script>

что-то не выходит у меня. Все равно, только первый слайдит.

mishka · August 30, 2011

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>slideshow</title>
	<style>
		.slideshow { margin: 20px; }
		.item {
			width: 150px;
			height: 100px;
			border: 1px solid #000;
			background: #fff;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
	<script>
		$(document).ready(function() {
			$('.slideshow').cycle();
		});
	</script>
</head>
<body>
	<div class="slideshow">
		<div class="item">
			1
		</div>
		<div class="item">
			2
		</div>
		<div class="item">
			3
		</div>
	</div>
	<div class="slideshow">
		<div class="item">
			1
		</div>
		<div class="item">
			2
		</div>
	</div>
	<div class="slideshow">
		<div class="item">
			а тут только один элемент, поэтому он слайдится не будет.
		</div>
	</div>
</body>
</html>

oke11o · August 30, 2011

хм. А если вместо класс использовать id - не работает.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title>slideshow</title>
        <style>
                #slideshow { margin: 20px; }
                .item {
                        width: 150px;
                        height: 100px;
                        border: 1px solid #000;
                        background: #fff;
                }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"
></script>
        <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.
js"></script>
        <script>
                $(document).ready(function() {
                        $('#slideshow').cycle();
                });
        </script>
</head>
<body>
        <div id="slideshow">
                <div class="item">
                        1
                </div>
                <div class="item">
                        2
                </div>
                <div class="item">
                        3
                </div>
        </div>
        <div id="slideshow">
                <div class="item">
                        1
                </div>
                <div class="item">
                        2
                </div>
        </div>
        <div id="slideshow">
                <div class="item">
                        а тут только один элемент, поэтому он слайдится не будет.
                </div>
        </div>
</body>
</html>

Не подскажите почему?

Edited August 30, 2011 by oke11o

mishka · August 30, 2011

Если монитором гвозди забивать, то он тоже не будет работать.

Айди должен быть уникальным на страничке!

Айди используй, если знаешь точно что он там нужен, иначе оставь его для програмиста, а сам юзай классы

Желаешь юзать именно айди? тогда так:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title>slideshow</title>
        <style>
                #slideshow-1,
                #slideshow-2,
                #slideshow-3 { margin: 20px; }
                .item {
                        width: 150px;
                        height: 100px;
                        border: 1px solid #000;
                        background: #fff;
                }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"

></script>
        <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.

js"></script>
        <script>
                $(document).ready(function() {
                        $('#slideshow-1').cycle();
                        $('#slideshow-2').cycle();
                        $('#slideshow-3').cycle();
                });
        </script>
</head>
<body>
        <div id="slideshow-1">
                <div class="item">
                        1
                </div>
                <div class="item">
                        2
                </div>
                <div class="item">
                        3
                </div>
        </div>
        <div id="slideshow-2">
                <div class="item">
                        1
                </div>
                <div class="item">
                        2
                </div>
        </div>
        <div id="slideshow-3">
                <div class="item">
                        а тут только один элемент, поэтому он слайдится не будет.
                </div>
        </div>
</body>
</html>

oke11o · August 30, 2011

супер. Спасибо. Теперь многое прояснилось :facepalmxd:

Sign In

Как сделать несколько одинаковых слайд шоу на странице

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information