5
Mam problem z moim użyciem, jeśli jest on śliski (suwak http://kenwheeler.github.io/slick/).Slick Slider Skoki podczas nawigacji - Zmienna szerokość i tryb Środek
Mam niestandardowy projekt i jest zaimplementowany, ale jest dziwne skakanie, gdy suwak zostanie przeniesiony do następnego. Zobacz demo tutaj - http://yourwebsitedemo.eu/sgslider/
wliczony jest Bootstrap, jQuery i Slick
HTML/CSS są sprawdzane - Brak błędów
mojego kodu.
$(document).ready(function(){
\t $('#carousel').slick({
\t \t infinite: true,
\t \t speed: 500,
\t \t centerMode: true,
\t \t variableWidth: true,
\t \t centerPadding: '0px',
cssEase: 'ease'
\t \t });
\t $("div.slick-list").removeAttr('style');
\t // Previous
\t $("button.slick-prev").empty();
\t $("button.slick-prev").append('<i class="fa fa-chevron-left circle circle-left"></i>');
\t // // Next
\t $("button.slick-next").empty();
\t $("button.slick-next").append('<i class="fa fa-chevron-right circle circle-right"></i>');
});/*===================
Fonts Style
===================*/
@font-face {
\t font-family: 'nexa_rust_sansblack_01';
\t src: url('../fonts/nexarustsans-black01-webfont.eot');
\t src: url('../fonts/nexarustsans-black01-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexarustsans-black01-webfont.woff2') format('woff2'), url('../fonts/nexarustsans-black01-webfont.woff') format('woff'), url('../fonts/nexarustsans-black01-webfont.ttf') format('truetype'), url('../fonts/nexarustsans-black01-webfont.svg#nexa_rust_sansblack_01') format('svg');
\t font-weight: normal;
\t font-style: normal;
}
@font-face {
\t font-family: 'nexa_boldregular';
\t src: url('../fonts/nexa_bold-webfont.eot');
\t src: url('../fonts/nexa_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_bold-webfont.woff2') format('woff2'), url('../fonts/nexa_bold-webfont.woff') format('woff'), url('../fonts/nexa_bold-webfont.ttf') format('truetype'), url('../fonts/nexa_bold-webfont.svg#nexa_boldregular') format('svg');
\t font-weight: normal;
\t font-style: normal;
}
@font-face {
\t font-family: 'droid_serifbold';
\t src: url('../fonts/droidserif-bold-webfont.eot');
\t src: url('../fonts/droidserif-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-bold-webfont.woff2') format('woff2'), url('../fonts/droidserif-bold-webfont.woff') format('woff'), url('../fonts/droidserif-bold-webfont.ttf') format('truetype'), url('../fonts/droidserif-bold-webfont.svg#droid_serifbold') format('svg');
\t font-weight: normal;
\t font-style: normal;
}
@font-face {
\t font-family: 'droid_serifbold_italic';
\t src: url('../fonts/droidserif-bolditalic-webfont.eot');
\t src: url('../fonts/droidserif-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-bolditalic-webfont.woff2') format('woff2'), url('../fonts/droidserif-bolditalic-webfont.woff') format('woff'), url('../fonts/droidserif-bolditalic-webfont.ttf') format('truetype'), url('../fonts/droidserif-bolditalic-webfont.svg#droid_serifbold_italic') format('svg');
\t font-weight: normal;
\t font-style: normal;
}
@font-face {
\t font-family: 'droid_serifitalic';
\t src: url('../fonts/droidserif-italic-webfont.eot');
\t src: url('../fonts/droidserif-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-italic-webfont.woff2') format('woff2'), url('../fonts/droidserif-italic-webfont.woff') format('woff'), url('../fonts/droidserif-italic-webfont.ttf') format('truetype'), url('../fonts/droidserif-italic-webfont.svg#droid_serifitalic') format('svg');
\t font-weight: normal;
\t font-style: normal;
}
@font-face {
\t font-family: 'droid_serifregular';
\t src: url('../fonts/droidserif-webfont.eot');
\t src: url('../fonts/droidserif-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-webfont.woff2') format('woff2'), url('../fonts/droidserif-webfont.woff') format('woff'), url('../fonts/droidserif-webfont.ttf') format('truetype'), url('../fonts/droidserif-webfont.svg#droid_serifregular') format('svg');
\t font-weight: normal;
\t font-style: normal;
}
html {
\t font-size: 16px;
}
body {
\t background: #fff;
}
h1 {
\t font-family: 'nexa_rust_sansblack_01', Helvetica, arial;
\t font-size: 3.75rem;
\t letter-spacing: 0.05em;
\t margin-bottom: 2.5rem;
}
h2 {
\t font-family: 'nexa_rust_sansblack_01', Helvetica, arial;
\t font-size: 1.5rem; /*24px*/
\t line-height: 2.125rem; /* 34px */
}
h3 {
\t font-family: 'nexa_boldregular';
\t font-size: 32px;
\t line-height: 45px;
\t text-transform: uppercase;
\t text-align: center;
}
h4 {
}
h5 {
}
h6 {
}
p {
\t font-family: 'droid_serifregular', Helvetica, Arial, Sans-Serif;
\t font-size: 1rem;
\t line-height: 1.9375rem; /*15px*/
}
*:focus { outline: none; }
.no-pad-left {
\t padding-left: 0;
}
.no-pad-right {
\t padding-right: 0;
}
.no-pad-lr {
\t padding: 0;
}
.carousel {
\t height: 530px;
\t list-style: none;
\t margin: 0;
\t position: relative;
\t overflow: hidden;
\t width: auto;
}
button.slick-prev {
\t display: inline-block;
\t position: absolute;
\t top: 42%;
\t left: 20%;
\t z-index: 10;
\t background: transparent;
\t border: none;
}
button.slick-next {
\t display: inline-block;
\t position: absolute;
\t top: 42%;
\t left: 75.5%;
\t z-index: 10;
\t background: transparent;
\t border: none;
}
.sm-slide-img {
\t border: none;
\t position: relative;
\t float: left;
\t height: 100%;
\t min-height: 1px;
}
.sm-slide-img img {
\t height: 460px;
\t padding: 20px 0;
\t margin-top: 30px;
}
.slick-center img {
\t height: 500px;
\t margin-top: 15px;
\t padding: 0;
\t -webkit-transition: all 0.1s ease;
\t -moz-transition: all 0.1s ease;
\t -ms-transition: all 0.1s ease;
\t -o-transition: all 0.1s ease;
\t transition: all 0.1s ease;
}
.slick-center .slide-text {
\t color: #fff;
\t position: absolute;
\t left: 5%;
\t right: 5%;
\t border: 2px solid rgba(255, 255, 255, 0.5);
\t padding: 100px 60px 110px 60px;
\t margin-top: -66%;
}
.slick-slide:focus {
\t display: block;
}
.slick-center .slide-text {
\t color: #fff;
\t position: absolute;
\t left: 5%;
\t right: 5%;
\t border: 2px solid rgba(255, 255, 255, 0.5);
\t padding: 100px 60px 68px 60px;
\t margin-top: -62.5%;
}
.slide-text {
\t color: #fff;
\t position: absolute;
\t left: 0%;
\t right: 10%;
\t border: none;
\t padding: 72px 60px 110px 60px;
\t margin-top: -65%;
}
.slide-text h1 {
\t text-transform: uppercase;
}
.slide-text p {
\t font-size: 13px;
\t font-family: 'nexa_boldregular';
\t line-height: 50px;
\t text-transform: uppercase;
\t letter-spacing: 0.125rem;
}
.slide-text p span, .slide-text p span:before, .slide-text p span:after {
\t text-decoration: underline;
\t border: none !important;
}
img.slide-bow-icon {
\t width: 37px;
\t height: 17px;
\t margin: 5px auto;
\t padding: 0px 0px;
}
.slick-center img.slide-bow-icon {
\t width: 37px;
\t height: 17px;
\t margin: 25px auto;
\t padding: 0;
}
.icon-lines {
\t line-height: 1.5rem;
\t text-align: center;
}
.icon-lines span {
\t display: inline-block;
\t position: relative;
}
.icon-lines span:before, .icon-lines span:after {
\t content: "";
\t position: absolute;
\t height: 11px; \t /*border-bottom: 2px solid #cccccc;*/
\t border-top: 2px solid #fff;
\t top: 47%;
\t width: 30px;
\t vertical-align: -50%;
}
.icon-lines span:before {
\t right: 115%; \t /*margin-right: 15px;*/
}
.icon-lines span:after {
\t left: 115%; \t /*margin-left: 15px;*/
}
.circle-left {
\t color: rgba(255,255,255,0.7);
\t padding: 18px 22px 18px 20px;
\t display: inline-block;
\t -moz-border-radius: 50%;
\t -webkit-border-radius: 50%;
\t border-radius: 50%;
\t /*-moz-box-shadow: 0px 0px 2px #888;*/
\t /* -webkit-box-shadow: 0px 0px 2px #888; */
\t /* box-shadow: 0px 0px 2px #fff; */
\t font-size: 1.3rem;
\t border: 2px solid rgba(255,255,255,0.7);
}
.circle-right {
\t color: rgba(255,255,255,0.7);
\t padding: 18px 20px 18px 22px;
\t display: inline-block;
\t -moz-border-radius: 50%;
\t -webkit-border-radius: 50%;
\t border-radius: 50%;
\t /*-moz-box-shadow: 0px 0px 2px #888;*/
\t /* -webkit-box-shadow: 0px 0px 2px #888; */
\t /* box-shadow: 0px 0px 2px #fff; */
\t font-size: 1.3rem;
\t border: 2px solid rgba(255,255,255,0.7);
}
.circle:hover, .circle:focus {
\t color: #fff;
\t border: 2px solid #fff;
}
.tint {
\t position: relative;
\t cursor: pointer;
}
.slick-center .tint:before {
\t content: "";
\t display: block;
\t position: absolute;
\t margin: 0;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t right: 0;
\t background: rgba(0, 0, 0, 0.35);
\t -moz-transition: all .2s ease;
\t -webkit-transition: all .2s ease;
\t -ms-transition: all .2s ease;
\t -o-transition: all .2s ease;
\t transition: all .2s ease;
}
.tint:before {
\t content: "";
\t display: block;
\t position: absolute;
\t margin: 20px 0;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t right: 0;
\t background: rgba(0, 0, 0, 0.35);
\t -moz-transition: all .2s ease;
\t -webkit-transition: all .2s ease;
\t -ms-transition: all .2s ease;
\t -o-transition: all .2s ease;
\t transition: all .2s ease;
}
.tint:hover:before {
\t background: rgba(0, 0, 0, 0.35);
}<!DOCTYPE html>
<html lang="">
\t <head>
\t \t <meta charset="utf-8">
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <title>SM Slider</title>
\t \t <!-- Font Awesome -->
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
\t \t <!-- Bootstrap CSS -->
\t \t <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
\t \t <!-- Slick Slide -->
\t \t <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
\t \t <!-- Slider Style -->
\t \t <link rel="stylesheet" href="css/main.css">
\t \t <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
\t \t <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
\t \t <!--[if lt IE 9]>
\t \t \t <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
\t \t \t <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
\t \t <![endif]-->
\t </head>
\t <body>
\t \t <h1 class="text-center">Slider for Smart Groom</h1>
\t \t
\t \t <div class="container-fluid no-pad-lr">
\t \t \t <div id="carousel" class="carousel">
\t \t \t \t \t <div class="sm-slide-img">
\t \t \t \t \t \t <figure class="tint"><img src="img/tux-or-suit.png" alt=""></figure>
\t \t \t \t \t \t <div class="slide-text icon-lines">
\t \t \t \t \t \t \t <h3>What to wear on your wedding day: Tux or Suit?</h3>
\t \t \t \t \t \t \t <span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
\t \t \t \t \t \t \t <p>27 sep // in <span>style</span></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="sm-slide-img icon-lines">
\t \t \t \t \t \t <figure class="tint"><img src="img/tuxedo.png" alt=""></figure>
\t \t \t \t \t \t <div class="slide-text">
\t \t \t \t \t \t \t <h3>What to wear on your wedding day: Tux or Suit?</h3>
\t \t \t \t \t \t \t <span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
\t \t \t \t \t \t \t <p>27 sep // in <span>style</span></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="sm-slide-img icon-lines">
\t \t \t \t \t \t <figure class="tint"><img src="img/suits.png" alt=""></figure>
\t \t \t \t \t \t <div class="slide-text">
\t \t \t \t \t \t \t <h3>What to wear on your wedding day: Tux or Suit?</h3>
\t \t \t \t \t \t \t <span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
\t \t \t \t \t \t \t <p>27 sep // in <span>style</span></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="sm-slide-img">
\t \t \t \t \t \t <figure class="tint"><img src="img/tux-or-suit.png" alt=""></figure>
\t \t \t \t \t \t <div class="slide-text icon-lines">
\t \t \t \t \t \t \t <h3>What to wear on your wedding day: Tux or Suit?</h3>
\t \t \t \t \t \t \t <span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
\t \t \t \t \t \t \t <p>27 sep // in <span>style</span></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="sm-slide-img icon-lines">
\t \t \t \t \t \t <figure class="tint"><img src="img/tuxedo.png" alt=""></figure>
\t \t \t \t \t \t <div class="slide-text">
\t \t \t \t \t \t \t <h3>What to wear on your wedding day: Tux or Suit?</h3>
\t \t \t \t \t \t \t <span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
\t \t \t \t \t \t \t <p>27 sep // in <span>style</span></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="sm-slide-img icon-lines">
\t \t \t \t \t \t <figure class="tint"><img src="img/suits.png" alt=""></figure>
\t \t \t \t \t \t <div class="slide-text">
\t \t \t \t \t \t \t <h3>What to wear on your wedding day: Tux or Suit?</h3>
\t \t \t \t \t \t \t <span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
\t \t \t \t \t \t \t <p>27 sep // in <span>style</span></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t </div>
\t \t </div>
\t \t <!-- jQuery -->
\t \t <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
\t \t <!-- Slick Nav -->
\t \t <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
\t \t <!-- Slider JS -->
\t \t <script src="js/slider.js"></script>
\t \t <!-- Bootstrap JavaScript -->
\t \t <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
\t </body>
</html>
Czy można znaleźć rozwiązanie? Teraz mam podobny problem, jak sądzę (ponieważ demo nie działa teraz). –
Witaj Dmitriy, nie mogę sobie przypomnieć rozwiązania, ale stwierdziłem, że zabezpieczanie moich obrazów, w których jest załadowany funkcją init, spowodowało przerwanie skakania. Może dołączyć jsfiddle, aby zobaczyć swój problem. (działający slajd na końcu http://smartgroom.com/) – jay88ld
Adres URL twojego demo to 404ing – Antfish