0
Sadece bir skelenton & sekmeli navigasyonlu bir baykuş slayt gösterisi hazırlıyorum. Metin gezinmeyle slaydı döndürmek için jquery'ye ihtiyacım var. Herhangi biri, bunun uygulanabilir olduğu konusunda yardımcı olabilir.Baykuş Slayt Gösterisi'nde jquery & litte html css ile ilgili iyileştirme Tabelada Gezinme (sayfalandırma)
Referans demo: http://www.suprafootwear.com/
this is what i end with html and css using my local server
ben de az div gibi kod bazı taşınabilirlik istiyoruz ve ayrıca çok & taşma sorunları yerleştirin.)
jQuery('.owl-carousel').owlCarousel({
\t items: 1,
\t center: true,
\t margin: 0,
\t callbacks: false, \t
\t autoplayHoverPause: true, \t
\t loop: true,
\t autoplay: true,
\t autoplayTimeout: timer,
\t URLhashListener: false,
\t startPosition: 0,
\t responsiveClass:true,
\t responsive:{
\t \t \t \t 0:{ \t \t \t \t
\t \t \t \t \t dots: true,
\t \t \t \t \t stopOnHover: true,
\t \t \t \t },
\t \t \t \t 770:{ \t \t \t
\t \t \t \t \t nav: false,
\t \t \t \t \t dots: false,
\t \t \t \t \t onChange: selectTab,
\t \t \t \t }
\t \t \t }
\t
});body {
\t font-family: 'Lato', Calibri, Arial, sans-serif;
\t background: #fff;
\t font-weight: 300;
\t font-size: 15px;
\t color: #333;
}
.container
{
\t width:100%;
\t max-width:1024px;
\t position:relative;
\t background-color:#f39c12;
\t height:auto;
}
section{
\t display:block;
}
.c-slider #tab-container {
\t position:relative;
\t width:100%;
\t max-width:960px;
\t height:auto;
}
.c-slider #tab-container span {
display: block;
float: left;
width: 22.9995%;
margin-bottom:10px;
padding:10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
margin:5px;
}
.c-slider #tab-container a:nth-of-type(4) span
{
border-right: 0;
}
.c-slider #tab-container a, .c-slider #tab-container a:hover, .c-slider #tab-container a:active, .c-slider #tab-container a:visited
{
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
.c-slider #tab-container span:hover
{
color: #fff;
background: #444;
}
.c-slider #tab-container span.active
{
color: #fff;
background: #444;
opacity:0.5;
}
.c-slider #tab-container a span.active, .c-slider #tab-container a:hover span.active, .c-slider #tab-container a:active span.active, .c-slider #tab-container a:visited span.active
{
color: #fff;
}
.c-slider #slider_time {
display: none;
}
.demo-6 .ow-slider-wrapper {
\t width: 100%;
\t height: 400px;
\t overflow: hidden;
\t position: relative;
}
.demo-6 .bg-img {
\t padding: 200px;
\t box-sizing: content-box;
\t position: absolute;
\t top: -200px;
\t left: -200px;
\t width: 100%;
\t height: 100%;
\t background-size: cover;
\t background-position: center center;
}
.owl-carousel .owl-item img {
display: block;
width:100%;
height:auto;
}<!DOCTYPE html>
<html>
<head>
\t <title>FullWidthOwl Slider</title>
\t <link rel="stylesheet" type="text/css" href="http://www.suprafootwear.com/skin/frontend/rwd/supra/css/owl/owl.carousel.min.css">
\t </head>
<body>
<div class="container demo-6">
\t <div id="slider" class="ow-slider-wrapper">
\t <div class="owl-carousel owl-loaded owl-drag">
<div class="owl-item">
<div class="item">
\t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="">
</div>
</div>
<div class="owl-item">
\t <div class="item">
\t \t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
\t </div>
</div>
<div class="owl-item">
<div class="item">
\t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
</div>
</div>
<div class="owl-item">
<div class="item">
\t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
\t <div class="owl-nav disabled">
\t \t \t \t <div class="owl-prev">prev</div>
\t \t \t \t <div class="owl-next">next</div>
\t \t \t </div>
\t \t \t <div class="owl-dots disabled"></div>
</div>
</div>
\t </div>
\t </div>
\t **<section class="c-slider">
\t \t <div id="tab-container">
\t \t \t <a><span class="">TextOne</span></a>
\t \t \t <a><span class="">TextTwo</span></a>
\t \t \t <a><span class="">TextThree</span></a>
\t \t \t <a><span class="">TextFour</span></a>
\t \t </div>
\t \t \t <span id="slider_time">5000</span>
\t \t \t <div style="clear:both"></div>
\t </section>**
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://www.suprafootwear.com/skin/frontend/rwd/supra/js/owl/owl.carousel.min.js"></script>
</body>
</html>öylesine i bilgisayarıma uygulamak ve gururlu ile çalışabilir yüzden beni önermek ve daha iyi bir çözüm ile beni düzeltin refercence demo gösterilen olacağını tam genişlik slayt gösterisi ile küçük karışıklık var
ben size yardımcı olabilir bir jsfiddle Lütfen şunları –
evet ben sadece senin yorumun burada yayınladıktan sonra bitmiş anda onu – Kash
https://jsfiddle.net/Kaash/7zhmd3ju/ ben sadece bu konuda bana yardımcı oluşturmak – Kash