बूटस्ट्रैप हिंडोला में तीर का रंग बदलें

Question

मैं स्पष्ट रूप से यहाँ कुछ मूर्खतापूर्ण सरल याद कर रहा हूँ। मेरे पास एक सफेद पृष्ठभूमि वाली छवियां हैं इसलिए मैं बूटस्ट्रैप हिंडोला पर तीरों को संपादित करने में सक्षम होना चाहता हूं ताकि वे दिखाई दे सकें। इतने सारे तीरों का रंग बदल रहे हैं (पृष्ठभूमि नहीं जैसे मैंने किया है)।

सीएसएस

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}

हिंडोला एचटीएमएल

<div class = 'col-md-9'>

    <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" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item">
                <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item">
                <img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="Third slide" class = 'img-responsive'>
            </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>

</div>

html css twitter-bootstrap bootstrap-4 carousel

93

Paul Young 16 सितंबर 2017, 05:39

Answer 1

मुझे आशा है कि यह काम करता है, चीयर्स।

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

101

Marco 3 जिंदा 2018, 14:55

Answer 2

आपको इसका भी उपयोग करना चाहिए: <span><i class="fa fa-angle-left" aria-hidden="true"></i></span> Fontawesome का उपयोग करना। आपको मूल कोड को अधिलेखित करना होगा। निम्न कार्य करें और आप CSS पर अनुकूलित करने के लिए स्वतंत्र होंगे:

<a class="carousel-control-prev" href="#carouselExampleIndicatorsTestim" role="button" data-slide="prev">
    <span><i class="fa fa-angle-left" aria-hidden="true"></i></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicatorsTestim" role="button" data-slide="next">
    <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
    <span class="sr-only">Next</span>
 </a>

मूल कोड

<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>

15

Unison Tek 12 जून 2018, 20:51

Answer 3

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन इससे मुझे मदद मिली। मैंने यह भी पाया है कि बूटस्ट्रैप v4 के लिए आप इस तरह के नियंत्रणों को ओवरराइड करके तीर का रंग भी बदल सकते हैं:

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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") !important;
}

जहां आप fill='%23fff' fff को अंत में किसी भी हेक्साडेसिमल मान में बदलते हैं जो आप चाहते हैं। उदाहरण के लिए:

fill='%23000' काले रंग के लिए, fill='%23ff0000' लाल रंग के लिए वगैरह। बस एक नोट, मैंने महत्वपूर्ण घोषणा के बिना इसका परीक्षण नहीं किया है।

163

Frank A. 27 फरवरी 2018, 23:56

1

जादू की तरह काम करता है! बहुत - बहुत धन्यवाद!

–

moreirapontocom

12 पद 2019, 03:41

Answer 4

वर्तमान में बूटस्ट्रैप 4 एम्बेडेड एसवीजी डेटा जानकारी के साथ पृष्ठभूमि-छवि का उपयोग करता है जिसमें एसवीजी आकार का रंग शामिल होता है। कुछ इस तरह:

.carousel-control-prev-icon { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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"); }

fill='%23fff' के बारे में ध्यान दें कि यह एक रंग के साथ आकार भरता है, इस मामले में #fff (सफेद), लाल के लिए बस #f00 से बदलें

अंत में, इसे शामिल करना सुरक्षित है (अगले-आइकन के लिए समान परिवर्तन):

.carousel-control-prev-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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"); }

5

JDuarteDJ 11 अगस्त 2018, 04:47

Answer 5

बूटस्ट्रैप 4 में यदि आप केवल नियंत्रणों का रंग बदल रहे हैं तो आप sass चर का उपयोग कर सकते हैं, आमतौर पर custom.scss में:

$हिंडोला-नियंत्रण-रंग: #7b277d;

जैसा कि इस जीथब इश्यू नोट में हाइलाइट किया गया है: https://github.com/twbs/ बूटस्ट्रैप/मुद्दों/21985#इश्यू कमेंट-281402443

4

Cadmium 30 अगस्त 2018, 22:02

Answer 6

एक छोटा सा उदाहरण जो मेरे लिए काम करता है

    .carousel-control-prev,
    .carousel-control-next{
        height: 50px;
        width: 50px;
        outline: $color-white;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 1px solid $color-white;
        background-color: $color-white;
    }

    .carousel-control-prev-icon { 
        background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' 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"); 
        width: 30px;
        height: 48px;
    }
    .carousel-control-next-icon { 
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' 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");
        width: 30px;
        height: 48px;
    }

4

TrinitA 8 अक्टूबर 2018, 12:03

Answer 7

यदि आप हिंडोला के लिए bootstrap.min.css का उपयोग कर रहे हैं-

<a class="left carousel-control" href="#carouselExample" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselExample" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

Bootstrap.min.css फ़ाइल खोलें और "glyphicon-chevron-right" गुण ढूंढें और गुण जोड़ें "color:red"

1

PADMAJA SONWANE 23 मार्च 2018, 09:01

Answer 8

Sass का उपयोग करके हिंडोला नियंत्रण, कैप्शन और संकेतक के लिए रंगों को अनुकूलित करने के लिए आप इन चरों को शामिल कर सकते हैं

    $carousel-control-color: 
    $carousel-caption-color: 
    $carousel-indicator-active-bg:

0

Daniel Burns 23 फरवरी 2020, 21:42

Answer 9

फ़ॉन्ट विस्मयकारी चिह्नों के साथ:

<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="fa fa-chevron-left fa-lg" style="color:red;"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="fa fa-chevron-right fa-lg" style="color:red;"></span>
  <span class="sr-only">Next</span>
</a>

-2

hiFI 18 सितंबर 2019, 13:11

Answer 10

मुझे भी इसी तरह की समस्या थी, कुछ चित्र बहुत हल्के और कुछ गहरे थे, इसलिए तीर हमेशा स्पष्ट रूप से दिखाई नहीं देते थे इसलिए मैंने अधिक सरल दृष्टिकोण अपनाया।

मोडल-बॉडी सेक्शन में मैंने निम्नलिखित पंक्तियों को हटा दिया है:

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#id" data-slide="prev">
       <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#id" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

और निम्नलिखित को मोडल-हेडर अनुभाग में डाला

    <!-- Left and right controls -->
    <a  href="#gamespandp" data-slide="prev" class="btn btn-outline-secondary btn-sm">&#10094;</a>
    <a  href="#gamespandp"  data-slide="next" class="btn btn-outline-secondary btn-sm">&#10095;</a>

संकेतक अब स्पष्ट रूप से देखे जा सकते हैं, कोई अतिरिक्त आइकन नहीं जोड़ना या स्टाइल शीट के साथ खिलवाड़ नहीं करना, हालाँकि आप उन्हें अपनी इच्छानुसार स्टाइल कर सकते हैं!

यह डेमो छवि देखें:

[ demo Image]

0

Rebel 2 फरवरी 2020, 19:49

Answer 11

बूटस्ट्रैप -3 के लिए कोई उपयोग कर सकता है:

.carousel-control span.glyphicon {
    color: red;
}

2

Axel 16 सितंबर 2017, 09:47

बूटस्ट्रैप हिंडोला में तीर का रंग बदलें

11 जवाब

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल