Подскажите со слайдером пожалуйста

6 ответ(ов) в теме
yoko
4
   
На сайте с 14.11.2018
Участник
Тем 5
Сообщения 19
Для заказов:
Свободна
1
05:17

Доброго времени суток.
Использую готовый шаблон.
Нужен слайдер на bootstrap 4.1.3
Нашла вот такой:

Вы не можете просматривать опубликованные ссылки

Перепроверила содержимое и выяснила, что мне необходим только вот этот код:

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://edithtm.html5css.ru/la.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://edithtm.html5css.ru/chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://edithtm.html5css.ru/ny.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Вставила я его в нужное место (оно в готовом шаблоне прячется под )
Так вот. Дело в том, что слайдер получается упирается в самый верх странички.
Как мне опустить верхний уровень слайдера, что-бы он упирался в меню? (хочется немного его опустить ниже)

Посмотреть на это безобразие можно вот тут:

Вы не можете просматривать опубликованные ссылки

Как опустить слайдер ниже?

0
Игорь
Домовой 
За положительный вклад в сообщество
Приз зрительских симпатий
Авторитет сообщества
За активность на форуме
За активную помощь сообществу
1 872
   
На сайте с 30.11.2016
Администратор
Тем 75
Сообщения 831
Для заказов:
Свободен

Объявление 

Создание и продвижение сайтов. Мы хотим, чтобы работа с нашей компанией приносила вам дополнительных клиентов и посетителей сайта. Мы стремимся найти индивидуальный подход, обеспечить развитие бизнеса наших клиентов и вкладываем весь свой опыт в работу. Весь спектр услуг.
Закрыть
Подарок автору
2
08:48

Привет, по ссылке не вижу ничего похожего на то, что на скрине.

0
SEO - весь спектр
yoko
4
   
На сайте с 14.11.2018
Участник
Тем 5
Сообщения 19
Для заказов:
Свободна
3
15:11

Привет, по ссылке не вижу ничего похожего на то, что на скрине.

Немного спустила слайдер, и выглядит теперь вот так:
Сервисный центр GamerNet

Спустила неверным кодом:
<div class="row"> <br><br><br> </div>
Ведь так же не правильно?

0
Игорь
Домовой 
За положительный вклад в сообщество
Приз зрительских симпатий
Авторитет сообщества
За активность на форуме
За активную помощь сообществу
1 872
   
На сайте с 30.11.2016
Администратор
Тем 75
Сообщения 831
Для заказов:
Свободен

Объявление 

Создание и продвижение сайтов. Мы хотим, чтобы работа с нашей компанией приносила вам дополнительных клиентов и посетителей сайта. Мы стремимся найти индивидуальный подход, обеспечить развитие бизнеса наших клиентов и вкладываем весь свой опыт в работу. Весь спектр услуг.
Закрыть
Подарок автору
4
15:25

yoko сказал(а)
Ведь так же не правильно?

Неправильно.
Добавьте такие стили, в смысле измените у себя вот так этот блок в стилях

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 20px 10px;
}

Добавил к нему - margin: 20px 10px; тут уже сами можете выставить, хоть все четыре стороны отступы или первую оставить, будет от всех сторон. Ну и 20 можете на сои менять.

2
SEO - весь спектр
Игорь
Домовой 
За положительный вклад в сообщество
Приз зрительских симпатий
Авторитет сообщества
За активность на форуме
За активную помощь сообществу
1 872
   
На сайте с 30.11.2016
Администратор
Тем 75
Сообщения 831
Для заказов:
Свободен

Объявление 

Создание и продвижение сайтов. Мы хотим, чтобы работа с нашей компанией приносила вам дополнительных клиентов и посетителей сайта. Мы стремимся найти индивидуальный подход, обеспечить развитие бизнеса наших клиентов и вкладываем весь свой опыт в работу. Весь спектр услуг.
Закрыть
Подарок автору
5
15:26

Или добавьте в свои стили где то

.carousel-inner {
     margin: 20px 2px;
}

В общем как то так)

Редакции сообщения
21.12.2018 15:26ИгорьПричина: не указано
0
SEO - весь спектр
yoko
4
   
На сайте с 14.11.2018
Участник
Тем 5
Сообщения 19
Для заказов:
Свободна
6
17:26

Игорь сказал(а)

yoko сказал(а)
Ведь так же не правильно?

Неправильно.
Добавьте такие стили, в смысле измените у себя вот так этот блок в стилях

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 20px 10px;
}

Добавил к нему - margin: 20px 10px; тут уже сами можете выставить, хоть все четыре стороны отступы или первую оставить, будет от всех сторон. Ну и 20 можете на сои менять.

Все сделала как Вы подсказали, работает супер.. Вот только каруселька не отображается на мобильных устройствах...
Добавила вот такой вот код:
@media (max-width:480px){ .carousel-inner { position: relative; width: 100%; overflow: hidden; margin: 100px 10px 10px; } }
результата не дало =(
Что еще необходимо добавить?

0
Вы не имеете права на публикацию сообщений в этой теме
World Web Info
Все самое необходимое и интересное. Присоединяйтесь!
Авторизация
*
*
Регистрация
*
*
*
Пароль не введен
*
Генерация пароля