Çözüldü Mobil görünümde divleri tek tek göstermek

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
furkaniko

furkaniko

Hectopat
Katılım
17 Mart 2021
Mesajlar
249
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
Meslek
Siber Güvenlik Uzmanı
Arkadaşlar merhaba müşteri geri dönüşleri için bir slider yapmaya çalışıyorum masaüstü görünümünde herhangi bir sorun yok 3 adet div sürekli kayarak ilerliyor. Benim yapmak istediğim mobil görünüme geçince bu 3 tane görünen div sayısını 1'e düşürmek. Mobilde de 3 göstermeye çalışınca çok çirkin duruyor en azından 1 göstereyim tam gözüksün istiyorum. Mevcut görünümleri aşağıda ekledim.

Kod: 
<!doctype html>
<html lang="en">

<head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>CSS Section</title>

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 <link rel="stylesheet" href="main.css">
</head>
<style>

.musteri-slider {
 font-family: 'Open Sans', sans-serif;
}

.section-padding {
 padding: 80px 0;
}

.section-title {
 text-align: center;
 margin-bottom: 60px;
}

.section-borders span {
 height: 5px;
 background: #360ec4;
 width: 40px;
 display: inline-block;
 border-radius: 2px;
}

.section-borders span.black-border {
 background: #333;
 width: 30px;
 margin: 0 6px;

}

.client-testimonial-carousel .owl-dots button {
 height: 5px;
 background: #5318f5 !important;
 width: 20px;
 display: inline-block;
 margin: 5px;
 transition: .2s;
 border-radius: 2px;
}

.client-testimonial-carousel button.owl-dot.active {
 background: #000 !important;
 width: 30px;
}

.client-testimonial-carousel .owl-dots {
 text-align: center;
 margin-top: 25px
}

.single-testimonial-item {
 position: relative;
 box-shadow: 0 0 2px #dadfd3;
 margin: 2px;
 padding: 20px;
 font-style: italic;

}

.single-testimonial-item:before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 position: absolute;
 left: 20px;
 top: 50%;
 font-size: 20px;
 line-height: 30px;
 margin-top: -15px;
}

.single-testimonial-item:after {
 background: #ddd;
 height: 70%;
 left: 60px;
 position: absolute;
 top: 10%;
 width: 1px;
}

.single-testimonial-item h3 {
 font-size: 20px;
 font-style: normal;
 margin-bottom: 0;
}

.single-testimonial-item h3 span {
 display: block;
 font-size: 12px;
 font-weight: normal;
 margin-top: 5px;
}
</style>

<body>
 <div class="musteri-slider ">
 <div class="section-padding">
 <div class="container">
 <div class="row">
 <div class="col-md-12">
 <div class="section-title">
 <h2>Müşteri Dönüşleri</h2>

 <div class="section-borders">
 <span></span>
 <span class="black-border"></span>
 <span></span>
 </div>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-12">
 <div class="owl-carousel client-testimonial-carousel">
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>
 <div class="single-testimonial-item">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eveniet ex labore id beatae molestiae, libero quis eum nam voluptates quidem.</p>
 <h3>Jane Doe <span>Land Broker</span></h3>
 </div>

 </div>
 </div>
 </div>
 </div>
 </div>

 </div>

 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
 <script src="main.js"></script>
</body>
<script>
 $(document).ready(function(){
 $(".owl-carousel").owlCarousel({
 items:3,
 autoplay:true,
 margin:30,
 loop:true,
 dots:true
// nav:true,
// navText:["<i class='fas fa-long-arrow-alt-left'></i>","<i class='fas fa-long-arrow-alt-right'></i>" ]
 });
});
</script>

</html>
 

Dosya Ekleri

  • masasutu.PNG
    masasutu.PNG
    24,2 KB · Görüntüleme: 29
  • resim_2023-02-22_030504910.png
    resim_2023-02-22_030504910.png
    58,4 KB · Görüntüleme: 25
Çözüm
dgknbzglu
Sayfanın altındaki script kodunu verdiğim şekilde düzenlersen farkı görürsün, kendine göre düzeltirsin sonra.

JavaScript: 
 $(document).ready(function(){
 $(".owl-carousel").owlCarousel({
 autoplay:true,
 margin:30,
 loop:true,
 dots:true,
 responsiveClass:true,
 responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
// nav:true,
// navText:["<i class='fas fa-long-arrow-alt-left'></i>","<i class='fas fa-long-arrow-alt-right'></i>" ]
 });
});
Tarihe göre sırala Puana göre sırala
Sayfanın altındaki script kodunu verdiğim şekilde düzenlersen farkı görürsün, kendine göre düzeltirsin sonra.

JavaScript: 
 $(document).ready(function(){
 $(".owl-carousel").owlCarousel({
 autoplay:true,
 margin:30,
 loop:true,
 dots:true,
 responsiveClass:true,
 responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
// nav:true,
// navText:["<i class='fas fa-long-arrow-alt-left'></i>","<i class='fas fa-long-arrow-alt-right'></i>" ]
 });
});
 
Artı 0 Eksi
Çözüm
dgknbzglu dedi:
Sayfanın altındaki script kodunu verdiğim şekilde düzenlersen farkı görürsün, kendine göre düzeltirsin sonra.

JavaScript: 
 $(document).ready(function(){
 $(".owl-carousel").owlCarousel({
 autoplay:true,
 margin:30,
 loop:true,
 dots:true,
 responsiveClass:true,
 responsive:{
 0:{
 items:1
 },
 600:{
 items:3
 },
 1000:{
 items:5
 }
 }
// nav:true,
// navText:["<i class='fas fa-long-arrow-alt-left'></i>","<i class='fas fa-long-arrow-alt-right'></i>" ]
 });
});
Genişletmek için tıkla...

Çok teşekkür ederim hocam işe yaradı.
 
Son düzenleyen: Moderatör:
Artı 0 Eksi

Benzer konular

B
HTML CSS ve JavaScript responsive yaparken tüm ögelere tek tek boyut belirtmek doğru mu?
Mesaj
3
Görüntüleme
712
Vegas
Vegas
Kroverr
  • Çözüldü
Çözüldü  HTML ile tek sayfalı site yapımı
Mesaj
2
Görüntüleme
739
Kroverr
Kroverr
S.T.R.A.N.G.R.
Tek Sayfalı, Sadece İçeriklerin Değiştiği Tasarım
Mesaj
2
Görüntüleme
583
cagkansezgin
cagkansezgin
kaan32659
Tek bir IP'ye ait web sitesi oluşturmak
Mesaj
6
Görüntüleme
353
codelab
codelab
SwagMonster
Tek Tıkla Otomatik Sayfa Açmak İçin Kodlar
Mesaj
2
Görüntüleme
565
Emrah Akçay
Emrah Akçay

Yeni konular

Yeni mesajlar

Geri
Yukarı