Çözüldü Bootstrap Slider Renk Değiştirme

ANON1M · 7 Şubat 2023

Merhaba, bootstrap biliyorum denemez pek. CSS'de de pek iyi değilim.

Kod:

                                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                        <ol class="carousel-indicators">
                                          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                        </ol>
                                        <div class="carousel-inner">
                                          <div class="carousel-item active">
                                            <img class="d-block w-100" src=".." alt="First slide">
                                          </div>
                                          <div class="carousel-item">
                                            <img class="d-block w-100" src=".." alt="Second slide">
                                          </div>
                                        </div>
                                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                          <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                          <span class="sr-only">Next</span>
                                        </a>
                                      </div>

Kodlar bu şekil benim isteğim yandaki çıkan butonun rengini değiştirmek. Butonun rengi beyaz, buton gözükmüyor alttaki resimlerden. Nasıl yaparım yardımcı olursanız sevinirim.
İyi forumlar...

Ecmel · 7 Şubat 2023

Bootstrap'te bunu yapmak biraz farklıymış. Daha doğrusu icon olarak görsel kullandığı için diyelim.

CSS:

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

Burada rengi ayarladığımız kısım fill='%23ff0000 kısmı. Burada fill='%23' kısmından sonra renk değeri girmeniz gerekmekte hangisini istiyorsanız. Mesela benim attığım kodda kırmızı ayarlı. Birkaç örnek daha vereyim. fill='%2300ff00' bu şekilde yeşil yapabilirsiniz. Renk kodlarını verdiğim değerden sonra girmelisiniz.

Bu arada bu yazdığınız CSS kodunun Bootstrap'ten sonra yazılması lazım. Örneğini veriyorum. Attığınız kodları yazdığınız dosyayı style.css olarak varsaydım. Sizin dosyanız neyse ona göre ayarlayabilirsiniz.

HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

Ecmel · 7 Şubat 2023

CSS kısmında "carousel-control-prev" ve "carousel-control-next" class'larına özellik verebilirsiniz. Class'a özellik vermek için "." kullanmalısınız.

Örnek:

CSS:

.carousel-control-next{
    color:red;
    background-color: blue;
}

Bunun gibi CSS kısmında istediğiniz özelliği class'a verebilirsiniz. Eğer özellik uygulanmıyorsa incele üzerinden kontrol edip !important kullanabilirsiniz.

ANON1M · 7 Şubat 2023

Ecmel dedi:
CSS kısmında "carousel-control-prev" ve "carousel-control-next" class'larına özellik verebilirsiniz. Class'a özellik vermek için "." kullanmalısınız.

Örnek:

CSS:

.carousel-control-next{ color:red; background-color: blue; }

Bunun gibi CSS kısmında istediğiniz özelliği class'a verebilirsiniz. Eğer özellik uygulanmıyorsa incele üzerinden kontrol edip !important kullanabilirsiniz.

Sağ olun hocam lakin ben ikonun rengini değiştirmek istiyorum. Color işe yaramıyor, background color da zaten arka planı değiştiriyor. İkonun rengini nasıl değiştiririz?

Ecmel · 7 Şubat 2023

Bootstrap'te bunu yapmak biraz farklıymış. Daha doğrusu icon olarak görsel kullandığı için diyelim.

CSS:

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

Burada rengi ayarladığımız kısım fill='%23ff0000 kısmı. Burada fill='%23' kısmından sonra renk değeri girmeniz gerekmekte hangisini istiyorsanız. Mesela benim attığım kodda kırmızı ayarlı. Birkaç örnek daha vereyim. fill='%2300ff00' bu şekilde yeşil yapabilirsiniz. Renk kodlarını verdiğim değerden sonra girmelisiniz.

Bu arada bu yazdığınız CSS kodunun Bootstrap'ten sonra yazılması lazım. Örneğini veriyorum. Attığınız kodları yazdığınız dosyayı style.css olarak varsaydım. Sizin dosyanız neyse ona göre ayarlayabilirsiniz.

HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

ANON1M · 7 Şubat 2023

@Ecmel gerçekten çok teşekkür ederim.
Sorunum çözüldü, çözüldü olarak raporladım, sağ olun.

Çözüldü Bootstrap Slider Renk Değiştirme

Ayrıntılı düzenleme

ANON1M

Kilopat

Ecmel

Ecmel

Megapat

ANON1M

Kilopat

Ecmel

Megapat

ANON1M

Kilopat

Benzer konular