- 0
Slider не могу установить кнопки под слайдер!
-
Similar Content
-
By jksnf
Не работает transition при появлений модального окна:
<a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.
Что делать?
-
By IsayR
Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});
-
By Алеся
Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует. https://alesia-k.github.io/Tajam-template/
Обратите, пожалуйста, внимание на:
- блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить?
- инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было.
- и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a> не идет процесса соединения.
Заранее спасибо!
-
By Алеся
Ребята, без вас никуда!
Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?
На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints
Вот типа того что-то пробую...
https://jsfiddle.net/aqmuyhwd/
-
By Only091
Помогите пожалуйста, не получается сделать постраничную навигацию. Делал все по урокам. в Итоге получилось сделать два разных каталога один с фильтрами другой с постраничной навигацией. И теперь я пытаюсь объединить два каталога. Но не получается. Сами файлы урока в архике каталог. Буду очень благодарен если мне помогут! catalog.phpcatalogDB.js
каталог.7z
-
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
}
Link to comment
Share on other sites
2 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.