Yalnızca CSS kullanarak yapmak istiyorsan, bu örnek teki CSS kodlarında durum1 durum2 ... şeklinde belirttiğim bloklardan her seferinde bir tanesi aktif olacak şekilde diğerlerini yorum satırı haline getirerek inceleme yap. Daha detaylı bir seçim yapmak istiyorsa CSS Selectors dökümantasyonunu incelemeni tavsiye ederim. Ha bu arada CSS selector lerini kullanarak etkileşime girilen elementin(hover, focus vs) öncesindeki elementlere seçim uygulayamıyoruz, fakat javascript kullanarak kolay bir şekilde seçim yapabilrsin.
CSS'te shape-outside kullanarak yapabilirsin. Şöyle bir örnek bırakıyorum, kendine göre uyarlayabilirsin.
Resmi görüntüleyemiyorum maalesef, sorunu hala çözemediyseniz yeni bir konu açmanızı tavsiye ederim.
.div {
width: 100px;
height: 100px;
transition: 500ms border-color;
text-align: center;
line-height: 100px;
margin: 50px;
color: white;
border-bottom: 2px solid;
border-color: transparent;
background: gray;
}
.div:hover {
border-color: red;
}
Şöyle bir trick deneyebilirsin.
Bence böyle yapman gayet mantıklı olmuş, fakat farklı bir yöntem öneren olacak mı bakalım, ben de merak ettim.
.swiper-slide lara 300px vermek yerine .swiper-container'ın genişliğine 960px (3 adet slide'ın genişliği + 2 adet boşluk genişliği) ver. Daha sonra gördüğüm kadarıyla .swiper-slide lara border vermişsin, ayrıca bir de box-sizing: border-box ver ki genişlikleri borderdan dolayı etkilenmesin.
Daha önce kullanmadım fakat Mapbox'a bir bakmanı tavsiye ederim. Altyapı olarak OSM(Open Street Map)'ı kullanıyor sanırım. Belli bir kullanıcı limitine kadar da ücretsiz olduğunu söylüyor. Bir çok özelleştirme seçeneği ve plugin desteği de sunuyor. Dökümantasyonu da gayet geniş.
Aradığın search işlemini de bu link den yararlanarak yapabilirsin. Örneğin linkteki API'a search string'in ile istekte bulunursun, bu istek sonucu gelen json datasından istediğin koordinatları oluşturduğun haritanın koordinatlarına uygularsın. Yada Mapbox'un kendi arama kutusu özelliğini aktif edersin (o da şu linkten) o kadar uğraşmana gerek kalmaz.
usort($dataArray, function($current, $next){
return $current->izlenmeler < $next->izlenmeler;
});
Bu işlemden sonra orijinal dataArray'in değişime uğrayacaktır. Eğer uğramasını istemiyorsan öncelikle bir kopyasını al, örneğin sortedData diye bir değişkene at. Daha sonra da bu işlemleri sortedData üzerinde uygula.
Not: Yukarıdaki kod büyükten küçüğe sıralayacaktır. Eğer küçükten büyüğe istersen aradaki < işaretini > yapmalısın.
if'e condition verirken yanlış yazmışsın, aşağıdaki kodu dene.
$("#checkbox2, #checkbox3").click(function () {
let isBox2Checked = $('#checkbox2 input').is(':checked');
let isBox3Checked = $('#checkbox3 input').is(':checked');
if (isBox2Checked && isBox3Checked) {
$('#textbox2').attr('value', 'Female');
} else {
$('#textbox2').attr('value', '');
}
});