5
Ho un problema con il mio utilizzo se slick (dispositivo di scorrimento http://kenwheeler.github.io/slick/).Dispositivo di scorrimento scorrevole Salto sulla navigazione - Larghezza variabile e modalità centrale
Ho un design personalizzato ed è implementato ma c'è uno strano salto quando il cursore viene spostato al successivo. Vedi Demo qui - http://yourwebsitedemo.eu/sgslider/
Incluso è Bootstrap, jQuery e Slick
HTML/CSS sono convalidati - Nessun errore
mio codice.
$(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>
si fa a trovare una soluzione? Ora ho un problema simile (perché la demo non funziona ora). –
Ciao Dmitriy, non mi ricordo la soluzione, ma ho scoperto che assicurando le mie immagini che erano state caricate con la levetta sulla funzione init, il salto si fermava. Forse includi un jsfiddle per vedere il tuo problema. (slide di lavoro alla fine http://smartgroom.com/) – jay88ld
L'URL della tua demo è 404ing – Antfish