Форум

cenzored · #1 (**permalink**) 13.06.2012, 16:22

Есть Carousel with external controls (Карусель с внешними элементами управления) - http://sorgalla.com/projects/jcarous..._controls.html. Всё бы хорошо, но как сделать так, чтобы номер текущего слайда подсвечивался? Интересует даже не номер, а кружочки такие как это обычно делается.

Спасибо!

Deff · #2 (**permalink**) 13.06.2012, 17:17

cenzored,
Изобразите желаемый итоговый вид на скриншоте, не слишком понятно

cenzored · #3 (**permalink**) 14.06.2012, 12:00

Серенький кружочек внизу - активный слайд, остальные кружочки кликабельны, по клику происходит переход к соответствующему слайду.

sergasd · #4 (**permalink**) 14.06.2012, 19:37

У каждого кружка должен быть атрибут "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/

cenzored · #5 (**permalink**) 16.06.2012, 19:45

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;
    });
};

что в него нужно добавить?

Deff · #6 (**permalink**) 16.06.2012, 20:02

cenzored,
Вы можете

Сообщение от cenzored

Серенький кружочек внизу - активный слайд, остальные кружочки кликабельны, по клику происходит переход к соответствующему слайду

В данной реализации - кружочки прорисованы прям на картинке,
Мож и Вам голову не ломать - а прорисовать так же ? тады они на автомате будут посвечены ( минус один - кружки должны занимать точно туже позицию
http://s2.hostingkartinok.com/upload...35cfacd345.jpg

cenzored · #7 (**permalink**) 16.06.2012, 20:50

Deff
не, так не пойдёт, картинки берутся из каталога, периодически меняются, прикручивать к каждой кружочек совсем не удобно.

Предложенное sergasd'ом решение где-то рядом, нужно только доработать чуть-чуть :-)

Deff · #8 (**permalink**) 16.06.2012, 21:55

cenzored,
Попробуйте выложить чистый работоспособный код без дополнений, в опере локальный файл у меня - виснет

cenzored · #9 (**permalink**) 17.06.2012, 15:01

<!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, у меня всё работает

Deff · #10 (**permalink**) 17.06.2012, 15:10

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" />

Форум

Справочник

Discord чат

Курсы javascript