5
अगर मुझे स्लिम (स्लाइडर http://kenwheeler.github.io/slick/) उपयोग में मेरे उपयोग के साथ कोई समस्या है।नेविगेशन पर स्लिम स्लाइडर कूदते - परिवर्तनीय चौड़ाई और केंद्र मोड
मेरे पास एक कस्टम डिज़ाइन है और इसे कार्यान्वित किया गया है लेकिन स्लाइडर को अगले स्थान पर ले जाने पर एक अजीब कूद रहा है। डेमो यहाँ देखें - http://yourwebsitedemo.eu/sgslider/
शामिल बूटस्ट्रैप, jQuery और स्लिक
HTML/CSS है मान्य किए जाते हैं - कोई त्रुटि नहीं
मेरे कोड।
$(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>
आप समाधान खोजने के है? अब मुझे एक ही समस्या है जो मुझे लगता है (क्योंकि डेमो अब काम नहीं कर रहा है)। –
हैलो दिमित्री, मुझे समाधान याद नहीं है, लेकिन मैंने पाया कि मेरी छवियों को बीमा करना जहां इनिट फ़ंक्शन पर स्लिम के साथ लोड किया गया था, यह कूदने के लिए कूद गया। शायद अपनी समस्या देखने के लिए एक jsfiddle शामिल करें। (अंत में काम कर रहे स्लाइड http://smartgroom.com/) – jay88ld
आपके डेमो के लिए यूआरएल 404 है – Antfish