Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
wmaraci reklam
wmaraci reklam

Swiper Duzenlemesi

 6 Mesajlar 2.220 Okunma
Toplam 6 mesaj ve 2.220 görüntüleme
acebozum
wmaraci reklam

#1
emalper emalper WM Aracı Kullanıcı
  • Üyelik 12.06.2017
  • Yaş/Cinsiyet 30 / E
  • Meslek Ogrenci
  • Konum Bursa
  • Ad Soyad A** E**
  • Mesajlar 72
  • Beğeniler 4 / 4
  • Ticaret 0, (%0)
Iyigunler arkadaslar internetten buldugum mobil uyumlu yan paneli/swiperi siteme aktarmak istiyorum ama bir turlu beceremedim. Istedigim sey yan paneli acip kapama tusunun oraya duz bir menu alani eklemek. Yani en uste yan menuyu acip kapatma tusunun yanina duz bir navbar/menu eklemek istiyorum bunu nasil yapabilirim acaba?









Swiper demo






<script></script>
<script></script>
<script></script>






Menu slide







deneme


Content slide





<script>
var menuButton = document.querySelector('.menu-button');
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
slideToClickedSlide: true,
on: {
init: function () {
var slider = this;
menuButton.addEventListener('click', function () {
if (slider.activeIndex === 0) {
slider.slideNext();
} else {
slider.slidePrev();
}
}, true);
},
slideChange: function () {
var slider = this;
if (slider.activeIndex === 0) {
menuButton.classList.add('cross');
} else {
menuButton.classList.remove('cross');
}
},
}
});
</script>








html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.menu {
min-width: 100px;
width: 70%;
max-width: 320px;

background-color: #2C8DFB;
color: #fff;
}
.content {
width: 100%;
}

.menu-button {
position: absolute;
top: 0px; left: 0px;

padding: 15px;

cursor: pointer;

-webkit-transition: .3s;
transition: .3s;

background-color: #2C8DFB;

/*margin: 14px;
border-radius: 5px;*/
}
.menu-button .bar:nth-of-type(1) {
margin-top: 0px;
}
.menu-button .bar:nth-of-type(3) {
margin-bottom: 0px;
}

.bar {
position: relative;
display: block;

width: 50px;
height: 5px;

margin: 10px auto;
background-color: #fff;

border-radius: 10px;

-webkit-transition: .3s;
transition: .3s;
}

.menu-button:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(1.5px) rotate(-4.5deg);
-ms-transform: translateY(1.5px) rotate(-4.5deg);
transform: translateY(1.5px) rotate(-4.5deg);
}
.menu-button:hover .bar:nth-of-type(2) {
opacity: .9;
}
.menu-button:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-1.5px) rotate(4.5deg);
-ms-transform: translateY(-1.5px) rotate(4.5deg);
transform: translateY(-1.5px) rotate(4.5deg);
}

.cross .bar:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
-ms-transform: translateY(15px) rotate(-45deg);
transform: translateY(15px) rotate(-45deg);
}
.cross .bar:nth-of-type(2) {
opacity: 0;
}
.cross .bar:nth-of-type(3) {
-webkit-transform: translateY(-15px) rotate(45deg);
-ms-transform: translateY(-15px) rotate(45deg);
transform: translateY(-15px) rotate(45deg);
}
.cross:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(13.5px) rotate(-40.5deg);
-ms-transform: translateY(13.5px) rotate(-40.5deg);
transform: translateY(13.5px) rotate(-40.5deg);
}
.cross:hover .bar:nth-of-type(2) {
opacity: .1;
}
.cross:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-13.5px) rotate(40.5deg);
-ms-transform: translateY(-13.5px) rotate(40.5deg);
transform: translateY(-13.5px) rotate(40.5deg);
}

 

 

wmaraci reklam
reklam

#2
wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 34 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
Naw menü için swiper kullanmana gerek yokki. İlla elle kaydırınca açılmasını mı istiyorsunuz?
 

 

Udemy Wordpress Tema Yapımı Kursum

#3
emalper emalper WM Aracı Kullanıcı
  • Üyelik 12.06.2017
  • Yaş/Cinsiyet 30 / E
  • Meslek Ogrenci
  • Konum Bursa
  • Ad Soyad A** E**
  • Mesajlar 72
  • Beğeniler 4 / 4
  • Ticaret 0, (%0)
Evet o ozelligi kullanmam gerekiyor ve buldugum en guzel ve en gelismis swiper buydu. O yuzden benim istedigim sey o mavi butonu oldugu yerde tutmak onunla ayni satira onunla ayni boyda bir menu/navbar eklemek. Bu arada bunuda bootstrap ile yapmak. Acaba nasil yapabilecegim hakkinda bir bilginiz var mi?

Yani o menu tusunun yanina hic bir sey ekleyemiyorum eklemeye calistigimda alta geciyor yana eklemiyor.
 

 

#4
wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 34 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
Evet swiper gerçekten başarılı. Şuanda yazmakta olduğum wp temada da onu kullanıyorum. Şuan mobildeyim. Akşam eve gidince sizinkini de halledeceğim.
 

 

Udemy Wordpress Tema Yapımı Kursum
wmaraci
wmaraci

#5
emalper emalper WM Aracı Kullanıcı
  • Üyelik 12.06.2017
  • Yaş/Cinsiyet 30 / E
  • Meslek Ogrenci
  • Konum Bursa
  • Ad Soyad A** E**
  • Mesajlar 72
  • Beğeniler 4 / 4
  • Ticaret 0, (%0)
Anladim cok tessekkur ederim sizden cevap bekliyorum ben gercekten cok memnun olurum yardim edebilirseniz.
 

 

#6
emalper emalper WM Aracı Kullanıcı
  • Üyelik 12.06.2017
  • Yaş/Cinsiyet 30 / E
  • Meslek Ogrenci
  • Konum Bursa
  • Ad Soyad A** E**
  • Mesajlar 72
  • Beğeniler 4 / 4
  • Ticaret 0, (%0)
Ben kodu birazcik duzenlemeye calistim ama ne yaptiysam istedigim sonucu bir turlu alamadim.







Swiper demo














Menu slide






Coloumn 1


Coloumn 2


Coloumn 3







Content Coloumn 1


Content Coloumn 2


Content Coloumn 3










<script></script>
<script></script>
<script></script>



<script>
var menuButton = document.querySelector('.menu-button');
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
slideToClickedSlide: true,
on: {
init: function() {
var slider = this;
menuButton.addEventListener('click', function() {
if (slider.activeIndex === 0) {
slider.slideNext();
} else {
slider.slidePrev();
}
}, true);
},
slideChange: function() {
var slider = this;
if (slider.activeIndex === 0) {
menuButton.classList.add('cross');
} else {
menuButton.classList.remove('cross');
}
},
}
});
</script>







Yukaridaki kod ile aldigim sonuc



Boyle bir goruntu aliyorum. Fark ediyorsaniz coloumd 1 mavi alanin yani sliderin icinde ama normalde onun sliderin disinda olmasi lazim ama swiperin kendi css dosyasi ile oynamama ragmen bunu degistiremedim.

Ayni zamanda mobilde navbar yani coloumlar tamamen birbirine giriyor. Neden acaba?

Birde content coloumlar sayfanin tam ortasinda onu ben 0-0 yapip navbarin altindan baslamasini istiyorum onu nasil yapabilirim?
 

 

Ücretsiz Web Geliştirme Kursu İstermisiniz?
Host mu? Local mi?
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al