Wie kann Responsive Nivo Slider mit Inhalt?

Ich bin ein Neuling zur Web-Entwicklung.Ich habe gerade versucht, Nivo Slider zu meinem Inhalt hinzuzufügen.Ich fügte hinzu, dass. Das Problem ist, wenn ich versuche, meine Vorlage auf mobile devices(320px) zu übertragen, wird es nicht richtig funktionieren.Das Hintergrundbild bekam Reaktionsfähigkeit , aber der Inhalt in dem Schieber wird nicht responsive.How komme ich dieses problem.I beheben viele Möglichkeiten ausprobiert, aber nicht work.Here ist mein Nivo Slider HTML-Code ...Wie kann Responsive Nivo Slider mit Inhalt?

<section id="wrapper"> 
    <div class="slider-wrapper theme-default"> 
<div id="slider" class="nivoSlider">  
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg" alt="" />  
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg" alt="" title="#htmlcaption1" />  
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg" alt="" />  
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg" alt="" title="#htmlcaption2" /> 
</div> 

<div id="htmlcaption1" class="nivo-html-caption responsive_slider"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis incidunt, iusto sit repellendus vel consequuntur, consequatur unde possimus sapiente expedita aut! Magnam necessitatibus corporis fugit impedit illum hic corrupti. 
    </p> 
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>   
</div> 

<div id="htmlcaption2" class="nivo-html-caption responsive_slider">  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis incidunt, iusto sit repellendus vel consequuntur, consequatur unde possimus sapiente expedita aut! Magnam necessitatibus corporis fugit impedit illum hic corrupti. 
    </p> 
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>   
</div>  
</div> 
</section>

Und hier ist mein CSS-Code ...

.slider-wrapper { 
    width: 100%;  
    margin: 0 auto;  
} 

.nivo-caption { 
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0; 
    color: #fff; 
    font-size: 22px; 
    left: 50%; 
    text-align: center; 
    top: 52%; 
    transform: translate(-50%, -50%); 
    width: 50%; 
} 



.slider_button_1 { 
    color: #FFFFFF;  
    border-radius: 0; 
    border: 1px solid #FFFFFF; 
    padding: 10px 15px; 
    text-transform: uppercase;  
} 

.slider_button_1:hover { 
    background: #0069A8; 
}

Ich möchte den Schieberegler mit dem Inhalt zu beantworten.Ist es trotzdem.

Danke von hier.

Quelle

2017-12-28 Kawsar_Ahmed

Versuchen Sie, diese

CSS

#nivoSlider, #nivoSlider img{width:100%;height:auto !important}

HTML

<div class="slider-wrapper theme-default"> 
    <div class="ribbon"></div> 
    <div id="nivoSlider" class="nivoSlider"> 
     <img src="" /> 
    </div> 
</div>

Referenz: How to make Nivo Slider Responsive

Quelle

2017-12-28 06:14:24

Aber das Problem ist, was soll ich in die Band class.pls erklären that.And eingeben, wenn Sie können pls das Loch Markup –

geben Sie Demo in jsbin hinzufügen oder jsfiddle i wird Ihnen helfen, integrieren dies –

Hier ist mein Link https://jsfiddle.net/Kawser_Ahmed/h8jypu3b/ –

Ich habe für Sie eine Referenz gefunden. Hier ist die Referenz-Link: Nivo Slider - Awesome jQuery Slider Plugin

Quelle

2017-12-28 06:27:12

Ich sah, dass früher.Der Schieberegler reagiert.Aber der Schieberegler reagieren möchten mit Inhalt. –

Es kann Arbeit mit Beschriftung sein. –

Wie kann Responsive Nivo Slider mit Inhalt?

Antwort

Verwandte Themen