Форум

Artem_A · #1 (**permalink**) 22.01.2016, 10:16

Есть проблема с плагином Cycle есть Html код слайдера который должен прокручивать SECTION'ы

<div id="slider_detail">
            <div id="nav_details">
              <a href="#" class="detailsIcon i1"></a>
              <a href="#" class="detailsIcon i2"></a>
              <a href="#" class="detailsIcon i3"></a>
            </div>
            <div id="pager">
              <section class="page1">
                <h2>Creative Ideas</h2>
                <p></p>
                <p</p>
              </section>
              <section class="page2">
                <h2>Creative Ideas2</h2>
                <p></p>
                <p></p>
              </section>
              <section class="page3">
                <h2>Creative Ideas3</h2>
                <p></p>
                <p></p>
              </section>
            </div>
          </div>

код слайдера

$(document).ready(function() {
    $('#pager').cycle({
		fx: 'scrollLeft',
		timeout: 00,
		pager: '#nav_details'
	});
});

Проблема в том, что все блоки section получают атрибут(color: rgb(0,0,0,) и он генерирует теги <a>, а не использует мои.

Это можно как нибудь исправить?

Siend · #2 (**permalink**) 22.01.2016, 11:18

Artem_A,
можно сам плагин расковырять, по мне это было бы самым простым решением.
P.s.: сам я с Cycle не работал, так что может есть и более простые способы.

Artem_A · #3 (**permalink**) 22.01.2016, 12:39

Siend,
Я ковырял и добился только устранения черного фона и генерации тега <a> но он все равно не хочет пользоваться моим nav

Siend · #4 (**permalink**) 22.01.2016, 12:41

Artem_A,
как ты ты этого пытался добиться? делал своему нав другой класс и обращался по этому классу?

Artem_A · #5 (**permalink**) 22.01.2016, 12:44

Siend,
нет, он и так обращается вроде через pager: "nav_details"
или нет?

рони · #6 (**permalink**) 22.01.2016, 12:48

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

Проблема в том, что все блоки section получают атрибут(color: rgb(0,0,0,) и он генерирует теги <a>, а не использует мои.

а вам какая разница? оставили блок '#nav_details' пустым, потом если нужно добавили созданным плагином ссылкам нужные классы или без добавления прописали в css нужное вам оформление #nav_details а {всё что хотите}

рони · #7 (**permalink**) 22.01.2016, 12:59

Artem_A,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .detailsIcon{
     color: #FFFFFF;
     padding: 6px;
     text-decoration: none;
     margin: 5px;
   }
   .detailsIcon:nth-child(1){
      background-color: #FF00FF;
   }
   .detailsIcon:nth-child(2){
      background-color: #00BFFF;
   }
   .detailsIcon:nth-child(3){
      background-color: #FFD700;
   }
   .activeSlide{
     border: 2px solid #FF0000;
      margin: 3px;
   }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"></script>
  <script>
     $(function(){

        $('#pager').cycle({
		fx: 'scrollLeft',
		timeout: 0,
	    pager: '#nav_details'
	});
    $('#nav_details a').addClass('detailsIcon')
});


  </script>
</head>

<body>  <div id="slider_detail">
            <div id="nav_details">
            </div>
            <div id="pager">
              <section class="page1">
                <h2>Creative Ideas</h2>
                <p></p>
                <p></p>
              </section>
              <section class="page2">
                <h2>Creative Ideas2</h2>
                <p></p>
                <p></p>
              </section>
              <section class="page3">
                <h2>Creative Ideas3</h2>
                <p></p>
                <p></p>
              </section>
            </div>
          </div>



</body>

</html>

Artem_A · #8 (**permalink**) 22.01.2016, 13:00

рони,
Он так же цифры генерирует, но это ведь можно в самом плагине убрать?
я менял:

a = '<a href="#">'+(i+1)+'</a>';

,
на:

a = '<a href="#"></a>';

Artem_A · #9 (**permalink**) 22.01.2016, 13:14

рони,
но блоки все равно получают атрибут color: rgb(0,0,0)

рони · #10 (**permalink**) 22.01.2016, 13:14

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

но это ведь можно в самом плагине убрать?

нафига? не проще .text('') дописать в код предложенный выше

Форум

Справочник

Discord чат

Курсы javascript