Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2018, 13:30
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 53

Не включается скрипт слайдера
Привет всем! Пытаюсь освоить slick-slider. Нашёл сайт, всё скачал, подключил по инструкции. Но есть проблемы: пока что удалось подключить только самый простой вариант. Всё остальное - не могу понять, почему не работает. Прошу помощи. Также не могу объяснить:
1. "setting-name": "setting-value" - мне пришлось заключить в кавычки, чтобы В ПРИНЦИПЕ нечто появилось на странице. Хотя на сайте библиотеки - http://kenwheeler.github.io/slick/- пример показан БЕЗ кавычек. Почему?
2. Скрипт, судя по всему, работает, т.к. появляется самый простой вариант слайдера. Однако добавление - опять же, с того же сайта части, чтобы в слайдере одновременно отображалось 3 слайда (прикрепил) никакого действия не оказывает.
3. Стрелки вправо-влево: пришлось изменить стили, чтобы "вывести" их наружу - иначе не были видны. Хотя стили в библиотеке, согласно инспектору браузера, такие, что они уже при инициализации слайдера должны быть видны без вмешательства в стили.

<!DOCTYPE html>
<html>
	<head>
		<title></title>		
		<link rel="stylesheet" type="text/css" href="slick/slick/slick.css"/>
		<link rel="stylesheet" type="text/css" href="slick/slick/slick-theme.css"/>
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div class="wrapper">
			<div class="your-class">
			  <div class="multiple-items">1</div>
			  <div class="multiple-items">2</div>
			  <div class="multiple-items">3</div>
			</div>	
		</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>		
	<script type="text/javascript" src="slick/slick/slick.min.js"></script>
	<script src="js/script.js"></script>		
	</body>
</html>


Код:
body {
	background: lightblue;
}

.wrapper {
	overflow: hidden;
}

.your-class {
	width: 1200px;
	padding: 0 50px;
	margin: 0 auto;
	overflow: hidden;
}

.slick-track {
	height: 300px;
	
}

.slick-slide {
	margin: 0 10px;
	font-size: 116px;
	font-weight: 700;
	background: white;
	text-align: center;
	line-height: 300px;	
}

.slick-arrow {
	background: green;	
	z-index: 100;	
}

.slick-prev::before,
.slick-next::before {
	content: '';
}

.slick-prev {
	left: 0;
}

.slick-next {
	right: 0;
}
$(document).ready(function(){
	$('.your-class').slick({
		"setting-name": "setting-value"
	});
  
	$('.multiple-items').slick({
		  infinite: true,
		  slidesToShow: 3,
		  slidesToScroll: 3
	});	
});
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2018, 14:07
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,607

Сообщение от Alessio18911
"setting-name": "setting-value" - мне пришлось заключить в кавычки,
$('.your-class').slick({
        setting-name: setting-value
      });
-это просто синтаксис в общем виде - не для непосредственного использования.

В конкретном случае надо задавать определенный набор установок, например
$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
И класс прописывать тот, который у вас

Последний раз редактировалось Dilettante_Pro, 28.06.2018 в 14:11.
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2018, 14:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,600

slick-carousel init
Alessio18911,

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
        <style type="text/css">
         body {
    background: lightblue;
}

.wrapper {
    overflow: hidden;
}

.your-class {
    width: 1200px;
    padding: 0 50px;
    margin: 0 auto;
    overflow: hidden;
}

.slick-track {
    height: 300px;

}

.slick-slide {
    margin: 0 10px;
    font-size: 116px;
    font-weight: 700;
    background: white;
    text-align: center;
    line-height: 300px;
}

.slick-arrow {
    background: green;
    z-index: 100;
}

.slick-prev::before,
.slick-next::before {
    content: '';
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="your-class">
              <div class="multiple-items">1</div>
              <div class="multiple-items">2</div>
              <div class="multiple-items">3</div>
               <div class="multiple-items">4</div>
               <div class="multiple-items">5</div>
               <div class="multiple-items">6</div>
            </div>
        </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
$(function(){
    $('.your-class').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
    });
});

   </script>

    </body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2018, 14:43
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 53

Сообщение от Dilettante_Pro Посмотреть сообщение
$('.your-class').slick({
        setting-name: setting-value
      });
-это просто синтаксис в общем виде - не для непосредственного использования.

В конкретном случае надо задавать определенный набор установок, например
$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
И класс прописывать тот, который у вас
Ах, вон он что... Не знал. Спасибо, теперь буду знать )
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2018, 15:04
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 53

Рони, спасибо огромное! Как всегда, Вы меня очень выручаете!! Уф, тяжко всё это идёт... Сам бы ни за что не догадался, в чём ошибка была!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт в скрипт :) Sakyra Общие вопросы Javascript 6 22.05.2013 08:58
Помогите вставить скрипт на страницу alexsio Работа 7 22.04.2013 17:19
Не работает скрипт :( VladimirV Javascript под браузер 5 21.12.2010 13:26
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 00:05
добавление окошка в скрипт подсчета слов Гость Общие вопросы Javascript 10 11.03.2008 16:07