Сегодня 29.03.2024 г.
Ваш IP-адрес: 54.226.94.217

Слайдер тегов (ссылок) на jQuery для сайта

 

 

Введение

 

На одном из последних проектов, понадобилось внедрить слайдер тегов для SEO-продвижения. Слайдер тегов (ссылок) представляет собой набор активных ключевых слов и словосочетаний на внутренние страницы сайта. Набор тегов активных ключевых слов сделан таким образом, что доступен для индексации поисковыми системами.

 

Посмотреть пример реализации вы можете по ссылке - ДЕМО.

 

Подключаем слайдер тегов (ссылок)

 

В этой статье мы рассмотрим, как вы можете сделать такой же слайдер тегов на своем сайте. И сразу хочу предупредить, что я тестировал работоспособность на jQuery 2.2.4 + Bootstrap v4.3.1. Установить себе на сайт не составит труда, достаточно подключить всё необходимое. Далее я продемонстрирую вариант реализации, который подошел под наш проект.

 

В том месте, куда вы хотите добавить слайдер тегов, разместите следующий код:

<div class="tag-slider">

    <div class="container">

        <div class="row">

            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 tag-slider-1">

                <div class="sl-links">                    

                    <div class="sl-list">
                        <ul class="sl-items">

                            <li class="item"><a href="/kottedzhi">аренда коттеджа</a></li>
                            <li class="item"><a href="/kottedzhi">дом в аренду на сутки</a></li>
                            <li class="item"><a href="/kottedzhi">коттедж на сутки недорого</a></li>
                            <li class="item"><a href="/kottedzhi">коттеджи без посредников</a></li>
                            <li class="item"><a href="/kottedzhi">снять коттедж на сутки</a></li>
                            <li class="item"><a href="/kottedzhi">снять дом посуточно</a></li>
                            <li class="item"><a href="/kottedzhi">аренда дома на сутки</a></li>
                            <li class="item"><a href="/kottedzhi">аренда коттеджа на сутки</a></li>
                            <li class="item"><a href="/kottedzhi">снять коттедж на просеке</a></li>
                            <li class="item"><a href="/kottedzhi">аренда дома посуточно</a></li>
                            <li class="item"><a href="/kottedzhi">снять коттедж недорого</a></li>
                            <li class="item"><a href="/kottedzhi">коттедж на сутки от собственника</a></li>

                            <li class="item"><a href="/kottedzhi-s-banej">снять дом с баней</a></li>
                            <li class="item"><a href="/kottedzhi-s-banej">коттедж с сауной на сутки</a></li>
                            <li class="item"><a href="/kottedzhi-s-banej">снять коттедж с баней</a></li>
                            <li class="item"><a href="/kottedzhi-s-banej">дома с баней в аренду на сутки</a></li>
                            <li class="item"><a href="/kottedzhi-s-banej">коттеджи с баней</a></li>

                            <li class="item"><a href="/kottedzhi-s-bassejnom">снять дом с бассейном</a></li>
                            <li class="item"><a href="/kottedzhi-s-bassejnom">аренда коттеджей с бассейном</a></li>
                            <li class="item"><a href="/kottedzhi-s-bassejnom">снять коттедж с бассейном</a></li>
                            <li class="item"><a href="/kottedzhi-s-bassejnom">дома с бассейном на сутки</a></li>
                            <li class="item"><a href="/kottedzhi-s-bassejnom">коттеджи с бассейном</a></li>

                            <li class="item"><a href="/kottedzhi">коттеджи в самарской области</a></li>
                            <li class="item"><a href="/kottedzhi">дом в самарской области</a></li>

                            <li class="item"><a href="/kottedzhi-na-prazdniki">коттеджи на праздники</a></li>
                            <li class="item"><a href="/kottedzhi-na-prazdniki">дом на праздник на сутки</a></li>
                            <li class="item"><a href="/kottedzhi-na-prazdniki">дом для вечеринки на сутки</a></li>
                            <li class="item"><a href="/kottedzhi-na-prazdniki">коттедж на день рождения</a></li>    

                            <li class="item"><a href="/kottedzh-na-volge">коттеджи у водоемов</a></li>
                            <li class="item"><a href="/kottedzh-na-volge">коттеджи на волге</a></li>
                            <li class="item"><a href="/kottedzh-na-volge">коттеджи на берегу волги</a></li>        

                            <li class="item"><a href="/kottedzhi">аренда дома длительно</a></li>

                            <li class="item"><a href="/kottedzhi-s-banketnym-zalom">коттеджи с банкетным залом</a></li>    
                            <li class="item"><a href="/kottedzhi-na-korporativ">коттеджи на корпоратив</a></li>    
                            <li class="item"><a href="/kottedzhi-na-svadbu">коттеджи на свадьбу</a></li>    
                            <li class="item"><a href="/kottedzhi-na-vypusknoj">коттеджи на выпускной</a></li>            

                            <li class="item"><a href="/kottedzhi">Коттеджи в Самаре</a></li>
                            <li class="item"><a href="/kottedzhi">Дома на Правом берегу</a></li>
                            <li class="item"><a href="/kottedzhi">В Красноярском районе</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Царевщине</a></li>
                            <li class="item"><a href="/kottedzhi">В Мастрюковских озерах</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Прибрежном</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Тольятти</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Шигонском районе</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи на Красной глинке</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Кинельском р-н</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Новокуйбышевске</a></li>
                            <li class="item"><a href="/kottedzhi">Дома в Пригороде 15 км</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в Безенчукском р-н</a></li>
                            <li class="item"><a href="/kottedzhi">В Ульяновской области</a></li>

                            <li class="item"><a href="/kottedzhi">Коттеджи с аудиосистемой</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с баней</a></li>
                            <li class="item"><a href="/kottedzhi">С банкетным залом</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с барбекю</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с бассейном</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с бильярдом</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи у водоемов</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с питанием</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с рыбалкой</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с пляжем</a></li>
                            <li class="item"><a href="/kottedzhi">С спортивной площадкой и тенисом</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с ТВ</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с теннисом</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с WI-FI</a></li>
                            <li class="item"><a href="/kottedzhi">С кондиционером</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи с караоке</a></li>
                            <li class="item"><a href="/kottedzhi">Коттеджи в лесу</a></li>
                            <li class="item"><a href="/kottedzhi">Дома с отоплением</a></li>
                            <li class="item"><a href="/kottedzhi">Коттедж на просеке</a></li>

                        </ul>
                    </div>

                    <div class="sl-button">
                        <div class="sl-prev"><a href="#"> &#8592 </a></div>
                        <div class="sl-next"><a href="#"> &#8594 </a></div>                        
                    </div>

                    <div class="sl-all-teg">
                        <a class="no-all" href="#">Свернуть</a>
                        <a class="pokaz-all" href="#">Показать все</a>
                    </div>

                </div>
                
            </div> <!--col--> 

        </div> <!--row--> 

    </div> <!--container--> 
        
</div> <!--tag-slider-->

<script type="text/javascript">
    $(function(){
            $('.tag-slider .sl-all-teg > a').click(function(e){
                e.preventDefault();
                $('.tag-slider').toggleClass('active');
            });
        });
</script>

Пропишите в самом конце вашего файла стилей следующий CSS код:

.tag-slider {
  margin: 30px auto 30px auto;
  width: 825px;
  display: block;
}

.tag-slider .container {
  background: rgba(242, 242, 242, 0.95);
  border-radius: 5px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.tag-slider .container .row .tag-slider-1 .sl-links {
  width: 100%;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-list {
  margin: 0px 0px;
  overflow: hidden;
  position: relative;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100000px;
  position: relative;
  overflow: hidden;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item {
  float: left;
  text-align: center;
  padding: 5px;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
  display: block;
  text-decoration: none;
  color: #000000;
  background-color: #ffffff;
  padding: 7px 13px;
  border-radius: 3px;
  margin: 0px 2px 0px 2px;
  box-shadow: 0px 0px 5px #5555;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 255px;
  height: 67px;
}

/*sl-button*/

.tag-slider .container .row .tag-slider-1 .sl-links .sl-button {
  display: block;
  width: 10%;
  float: left;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-prev a,
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-next a {
  display: block;
  text-decoration: none;
  color: #008bbe;
  padding: 0px 6px;
  font-size: 1.3rem;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-prev {
  float: left;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-next {
  float: right;
}

/*sl-all-teg*/

.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg {
  display: block;
  width: 90%;
  float: left;
  text-align: right;
  padding-top: 0px;
  padding-right: 15px;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg a {
  font-size: 1rem;
  border-bottom: 1px dashed #003a54;
  text-decoration: none;
  display: inline-block;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg a.no-all {
  display: none;
}

.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg a:hover {
  text-decoration: none;
}

/*tag-slider.active*/

.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items {
  width: 100%;
  height: auto;
}

.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-button{
  display: none;
}

.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-all-teg{
  width: 100%;
}

.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-all-teg .no-all {
  display: inline-block;
}

.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-all-teg .pokaz-all {
  display: none;
}

/**/


@media only screen and (max-device-width: 1200px) {
  .tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
    width: 211px;
  }
}

@media only screen and (max-device-width: 992px) {
  .tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
    width: 200px;
  }

  .tag-slider .container .row .tag-slider-1 .sl-links .sl-button {
    width: 20%;
  }

  .tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg {
    width: 80%;
  }
}

@media only screen and (max-device-width: 767px) {
  .tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
    width: 230px;
  }
}

@media only screen and (max-device-width: 576px) {
  .tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
    width: auto;
  }

  .tag-slider .container .row .tag-slider-1 .sl-links .sl-button {
    width: 30%;
  }

  .tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg {
    width: 70%;
  }

  .tag-slider.active .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item {
    width: 100%;
  }

  .tag-slider.active .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
    display: block;
    width: 100%;
    height: auto;
  }
}
 

Подключите jQuery скрипт слайдера в <head> вашего сайта:


$(document).on('click', ".sl-next",function(){ 
  var slLinks = $(this).parents('.sl-links');
  right_carusel(slLinks);
  return false;
});

$(document).on('click',".sl-prev",function(){ 
  var slLinks = $(this).parents('.sl-links');
  left_carusel(slLinks);
  return false;
});

function left_carusel(slLinks){
   var slLinks_width = $(slLinks).find('.item').outerWidth();
   $(slLinks).find(".sl-items .item").eq(-1).clone().prependTo($(slLinks).find(".sl-items")); 
   $(slLinks).find(".sl-items").css({"left":"-"+slLinks_width+"px"}); 
   $(slLinks).find(".sl-items").stop().animate({left: "0px"}, 200); 
   $(slLinks).find(".sl-items .item").eq(-1).remove(); 
}

function right_carusel(slLinks){
   var slLinks_width = $(slLinks).find('.item').outerWidth();
   $(slLinks).find(".sl-items").stop().animate({left: "-"+ slLinks_width +"px"}, 200); 
   setTimeout(function () { 
      $(slLinks).find(".sl-items .item").eq(0).clone().appendTo($(slLinks).find(".sl-items")); 
      $(slLinks).find(".sl-items .item").eq(0).remove(); 
      $(slLinks).find(".sl-items").css({"left":"0px"}); 
   }, 300);
}

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

 

Заключение

 

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

 

Всем удачи!

 

Комментарии   
+1 # Андрей 09.06.2021 20:59
А как сделать так, чтобы можно было перелистывать слайдер перетаскиванием мышью?
Ответить | Ответить с цитатой | Цитировать
Добавить комментарий


Если у вас имеются вопросы по поводу работы сайта, сотрудничества и предложений, вы можете написать на почту info@alexfine.ru

Я создал первую версию блога и введу его с 2015 года.

Копирование материалов сайта возможно только с указанием активной ссылки «www.alexfine.ru» в качестве источника.

Изображение кнопки наверх