| cenzored | 14.06.2012 12:00 |
Серенький кружочек внизу - активный слайд, остальные кружочки кликабельны, по клику происходит переход к соответствующему слайду.
jCarousel - как сделать чтобы подсвечивался текущий элемент управления?
Есть Carousel with external controls (Карусель с внешними элементами управления) - http://sorgalla.com/projects/jcarous..._controls.html. Всё бы хорошо, но как сделать так, чтобы номер текущего слайда подсвечивался? Интересует даже не номер, а кружочки такие как это обычно делается.
Спасибо! |
cenzored,
Изобразите желаемый итоговый вид на скриншоте, не слишком понятно |
Серенький кружочек внизу - активный слайд, остальные кружочки кликабельны, по клику происходит переход к соответствующему слайду. |
У каждого кружка должен быть атрибут "rel", равный позиции слайда.
initCallback : function(carousel){
//получаем коллекцию кнопок
var controls = $('.control_button');
//вешаем событие на каждую кнопку
controls.on('click', function(){
//прокручиваем карусель на нужный слайд
carousel.scroll($.jcarousel.intval($(this).attr('rel')));
//удаляем у всех кнопок активный класс
controls.removeClass('control_button_active');
//добавляем текущей нажатой кнопке активный класс
$(this).addClass('control_button_active');
});
}
Если нет возможности добавить атрибут "rel", номер слайда можно найти через http://api.jquery.com/index/ |
sergasd,
Спасибо, но я настолько плохо знаю javascript, что у меня не получается это прикруить. Также добавлю, что слайды листаются сами и хочется, чтобы активный кружочек также переключался или по клику. сейчас там такой код:
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
что в него нужно добавить? |
cenzored,
Вы можете Цитата:
Мож и Вам голову не ломать - а прорисовать так же ? тады они на автомате будут посвечены ( минус один - кружки должны занимать точно туже позицию http://s2.hostingkartinok.com/upload...35cfacd345.jpg |
Deff
не, так не пойдёт, картинки берутся из каталога, периодически меняются, прикручивать к каждой кружочек совсем не удобно. Предложенное sergasd'ом решение где-то рядом, нужно только доработать чуть-чуть :-) |
cenzored,
Попробуйте выложить чистый работоспособный код без дополнений, в опере локальный файл у меня - виснет |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
margin-bottom: 10px;
text-align: center;
}
.jcarousel-control a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
outline: none;
}
.jcarousel-scroll {
margin-top: 10px;
text-align: center;
}
.jcarousel-scroll form {
margin: 0;
padding: 0;
}
.jcarousel-scroll select {
font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: -10px;
text-decoration: underline;
font-size: 11px;
}
</style>
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#mycarousel").jcarousel({
scroll: 1,
auto: 2,
wrap: 'circular',
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with external controls</h3>
<p>
This carousel shows how to control it from outside.
</p>
<div id="mycarousel" class="jcarousel-skin-tango">
<ul>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
</ul>
</div>
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</body>
</html>
вот html, у меня всё работает |
cenzored,
На скрипты и стиль полную ссылку вставьте - иначе все придется повторять по установке карусели <script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script> <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" /> |
| Часовой пояс GMT +3, время: 04:27. |