- 0
-
Similar Content
-
By Алеся
Ребята, без вас никуда!
Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?
На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints
Вот типа того что-то пробую...
https://jsfiddle.net/aqmuyhwd/
-
By Алеся
Ребят, подскажите, в чем может быть ошибка. На странице два слайдера от splide. Один с классом splide (работающий), другой c классом splid (не работает). Выглядит так, будто не работают стили. Отображается как не маркированный список текста и картинок. Стили добавила единожды:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css" integrity="sha256-EqzwzekQXKNbB5EE4nNBQT+2gWQIWRZQXAd89YdIq8M=" crossorigin="anonymous"> Который не работает: Заранее спасибо!!
<div class="foo_columns"> <div class="splid"> <div class="splid__track"> <ul class="splid__list"> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo1.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo2.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo3.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Приколы", "downPicturePath": "img/foo4.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Авто", "downPicturePath": "img/foo5.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> </ul> </div> </div> <div class="foo__line"></div> <script> new Splid( '.splid', { type : 'loop', perPage: 1, speed: 2000, autoplay: true, interval: '3000', arrows: true, } ).mount(); </script> </div>
-
By maxfloyd
Всем привет. У меня возникла проблема, я не могу поместить прозрачное меню navbar на слайдер bootstrap 4.
Получается, что меню вверху, а под ним слайдер(
HTML:
CSS:
Вопрос решил. Слайдер нельзя помещать в хедер. Добавить свойства
header {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
-
By four17
Всем привет, как можно реализовать такой слайдер на платформе wordpress.
скриншот, и ссылка на источник http://www.futsaldynamo.com/ .
Функционал слайдера таков: выводит 4 поста сбоку (которые мы укажем в админке ,) и главный большой блок слайдера это картинка и контент текущего слайда ?
Спасибо за внимание и помощь , благодарен любому совету.
-
By XopicT
Каким образом мне переместить последнего человечка в начало слайдера при клике на стрелку? То есть, когда я нажимаю "дальше", последняя картика пропадает и появляеться в начале слайда, а остальніе смещаються вправо.
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
ivanu6kin
Здравйствуйте ! у меня возникла проблема ! Я вставил слайдер и картинки все хорошо по задумке нужно кнопки вставить под слайдер ! а сейчас кнопки навигации на слайдере ! я вписал z-index: -5 кнопки встали нормально только вот они потеряли ссылки ! незнаю как исправить чтоб и кпонки были снизу и ссылками они были! вот код слайдера
/*
* jQuery FlexSlider v1.0 (Release)
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensourc...mit-license.php
*/
/* Необходимые стили для FlexSlider
*********************************/
.flexslider {
height: 302px;
width: 901px;
margin: 0;
padding: 0;
position: relative;
}
.flexslider .slides li {display: none; list-style-type:none;} /* Скрываем слайды доя загрузки JS. Избегаем дергания изображений */
.flexslider .slides img {
height: 302px;
width: 901px;
display: block;
position: relative;
right: 0;
}
/* Тема по умолчанию для FlexSlider
*********************************/
.flexslider {}
.flexslider .slides li {position: relative;}
/* Стиль заголовков */
.flex-caption {width: 849px;
padding: 3%;
position: absolute;
right: 0;
bottom: -20px;
background: rgba(0,0,0,.3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 15px;
line-height: 18px;
overflow:hidden;
}
/* Навигация */
.flex-direction-nav li a {
height: 94px;
width: 94px;
display: block;
}
.flex-direction-nav li a.next {
background: url(theme/right.png) no-repeat 0 0;
position:absolute;
top: 100px;
left: 860px;
}
.flex-direction-nav li a.prev {
background: url(theme/left.png) no-repeat 0 0;
position:absolute;
top: 100px;
right:860px;
z-index:-5;
}
.flex-direction-nav {
list-style-type:none;}
вот код style.css
/*
Theme Name: plus
Theme URI:
Description: r plus
Version: 1.0
Author:
Author URI:
*/
/*
Css Document
*/
* {padding: 0; margin: 0}
body {
background: #fff;
font-family: Arial, Verdana, sans-serif
}
/*——————————-header———————————*/
.header {
background: #fff;
width: 901px;
margin: 0 auto
}
.header-top {
height: 108px;
width: auto
}
.logo {
height: 85px;
width: 221px;
float: left;
padding: 8px 0 17px 0
}
.contacts {
height: 108px;
width: 635px;
float: right
}
.contacts-first span{
font-family: "Arial black", sans-serif;
font-size: 11px;
font-weight: bold;
padding: 19px 40px 0 0;
color: #1a1a1a;
float: left
}
.contacts-first span h1{
font-family: arial, regular, sans-serif;
font-weight: normal;
font-size: 40px;
color: #808080
}
.contacts-last {
position: relative;
top:16px;
left:35px
}
.contacts-last ul li {
list-style-type:none;
line-height: 15px
}
.contacts-last ul li span {
font-family: arial, sans-serif;
font-size: 11px
}
.contacts-last ul li span a{
font-family: arial, sans-serif;
font-size: 11px;
color:#009245;
text-decoration:underline
}
.contacts-last ul li span a:hover{
font-family: arial, sans-serif;
font-size: 11px;
color:#009245;
text-decoration: none;
}
.contacts-last ul li a {
font-family: arial, sans-serif;
font-size: 18px;
color: #009245;
list-style-type: none;
line-height: 20px;
text-decoration:none
}
/*——————————-menu-nav——————————--*/
.menu {
background: red;
height: 39px;
padding: 2px 0 0 0;
margin: 0 0 20px 0
}
.menu ul li {
float:left;
list-style-type:none;
padding: 0 10px
}
/*——————————menu-end———————————*/
.slider {
width: 901px;
height: 302px;
position:relative;
margin: 0 auto;
background: white;
-webkit-box-shadow:0 1px 4px #818181;
-moz-box-shadow:0 1px 4px #818181;
box-shadow:0 1px 4px #818181;
}
.slider:before,
.slider:after {
content:"";
position:absolute;
z-index:-2;
}
.slider:before {
top:10px;
bottom:10px;
left:0;
right:0;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.slider-fon {
position:absolute;
top:240px;
background-color:white;
width:100%;
height:62px;
opacity:0.8;
filter:alpha(opacity=80);
}
.slider-text
{
position:absolute;
top:243px;
left:19px;
width:100%;
color:black;
text-align:center;
padding: 9px 0
}
Edited by ivanu6kinLink to comment
Share on other sites
11 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.