Karussell keine Bilder mit Hintergrund css

Mit ein bisschen ein Problem mit einem Schieberegler ich versuche, zusammenzustellen und ich kann nicht genau herausfinden, warum. Hoffentlich könnte jemand darauf hinweisen, was wahrscheinlich etwas Dummes ist.Karussell keine Bilder mit Hintergrund css

#slide1 { 
 
    background: url('../../images/captainShield.jpg') top center no-repeat; 
 
} 
 

 
#slide2 { 
 
    background: url('../../images/cinemaScreening.jpg') top center no-repeat; 
 
} 
 

 
#slide3 { 
 
    background: url('../../images/captainShield.jpg') top center no-repeat; 
 
}

<?php include('header.php') ?> 
 

 
     <div class="container" id="main"> 
 

 
      <div class="carousel slide" id="myCarousel"> 
 
       
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
        <li class="active" data-target="#myCarousel" data-slide-to="0" ></li> 
 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
 
        <li data-target="#myCarousel" data-slide-to="2"></li> 
 
       </ol><!-- end carousel-indicators --> 
 
       
 
       <div class="carousel-inner"> 
 
        <div class="item active" id="slide1"> 
 
         <div class="carousel-caption"> 
 
          <h4>Richmond Movie Club</h4> 
 
          <p>A movie club for movie enthusiasts</p> 
 
         </div><!-- end carousel-caption --> 
 
        </div><!-- end item --> 
 
        <div class="item" id="slide2"> 
 
         <div class="carousel-caption"> 
 
          <h4>Weekly Movie Screenings</h4> 
 
          <p>Richmond Movie Club hosts a weekly movie night playing movies based on member uploads and ratings</p> 
 
         </div><!-- end carousel-caption --> 
 
        </div><!-- end item --> 
 
        <div class="item" id="slide3"> 
 
         <div class="carousel-caption"> 
 
          <h4>Memberships open to public</h4> 
 
          <p>If you would like to know how to become a member use any of the contact options on the page</p> 
 
         </div><!-- end carousel-caption --> 
 
        </div><!-- end item --> 
 
       </div> 
 
       <!-- end carousel-inner --> 
 
       
 
       <!-- Controls --> 
 
       <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a> 
 
       <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a> 
 
      </div> 
 
      <!-- end myCarousel -->

bevor jemand fragt, ob ich richtig meine js und Bootstrap-Dateien verknüpft haben ja habe ich. Die Vorlage und die Dateien werden von einem bereits vorhandenen Projekt kopiert, das ordnungsgemäß funktioniert.

Wenn ich die CSS in irgendeiner Weise ändern, um die Hintergrundbilder zu machen, dann wird der Slider angezeigt und funktioniert einwandfrei. Sobald ich jedoch die Seite aktualisiere, verschwindet der Schieberegler und ich kann ihn nicht wieder zurückbekommen, wenn ich die CSS nicht ändere.

Zum Beispiel:

Wenn ich # slide1 zu einem Hintergrundbild zu ändern: dann sofort in dem Hintergrund ändern zurück: dann wird der Schieber auf meiner Seite angezeigt werden.

Ich bin ein wenig verwirrt, warum es das tut.

Jede Hilfe ist dankbar, danke.

Quelle

2017-01-31 Marcus Bristow

Zuerst haben Sie das data-ride="carousel" Attribut verpasst, das für den Animationsteil verantwortlich ist.

Sie können innerhalb <div class="item" ></div> Tag verwenden, damit es richtig funktioniert. Wenn Sie möchten, dass Ihre Karussell-Bilder als Hintergrundbild einen Text oder etwas ähnliches darüber haben, können Sie alles in den Bereich <div class="carousel-caption"></div> setzen, damit Ihr Karussellbild wie ein Hintergrundbild aussieht.

Hier ist die Arbeits example--

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<body> 
 

 

 
     <div class="container" id="main"> 
 

 
      <div class="carousel slide" id="myCarousel" data-ride="carousel"> 
 
       
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
        <li class="active" data-target="#myCarousel" data-slide-to="0" ></li> 
 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
 
        <li data-target="#myCarousel" data-slide-to="2"></li> 
 
       </ol><!-- end carousel-indicators --> 
 
       
 
       <div class="carousel-inner"> 
 
        <div class="item active" id="slide1"> 
 
         
 
         <img src='http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'> 
 
         <div class="carousel-caption"> 
 
          <h4>Richmond Movie Club</h4> 
 
          <p>A movie club for movie enthusiasts</p> 
 
         </div> 
 
         <!-- end carousel-caption --> 
 
        </div><!-- end item --> 
 
        <div class="item" id="slide2"> 
 
        <img src='http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg'> 
 
         <div class="carousel-caption"> 
 
          <h4>Weekly Movie Screenings</h4> 
 
          <p>Richmond Movie Club hosts a weekly movie night playing movies based on member uploads and ratings</p> 
 
         </div><!-- end carousel-caption --> 
 
        </div><!-- end item --> 
 
        <div class="item" id="slide3"> 
 
        <img src='http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'> 
 
         <div class="carousel-caption"> 
 
          <h4>Memberships open to public</h4> 
 
          <p>If you would like to know how to become a member use any of the contact options on the page</p> 
 
         </div><!-- end carousel-caption --> 
 
        </div><!-- end item --> 
 
       </div> 
 
       <!-- end carousel-inner --> 
 
       
 
       <!-- Controls --> 
 
       <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a> 
 
       <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a> 
 
      </div> 
 
      <!-- end myCarousel --> 
 
</body> 
 

 
</html>

hoffe, das hilft!

EDIT

Da die bootstrap-carousel im Kommentar von Markus erwähnt mit Hintergrund-Bild funktioniert (was ich noch nie zuvor verwendet hatte). Also meine obige Antwort funktioniert gut, aber wenn Sie es mit background-img css Eigentum verwenden möchten, können Sie das auch tun. Danke Markus!

Quelle

2017-02-01 00:09:29 neophyte

können Sie eigentlich Hintergrund verwenden: für das Karussell, wie ich es oft getan habe. Und es funktioniert jetzt. Es scheint ein Problem mit meinem Browser und nicht mit meinem Code zu sein :) Ich bevorzuge es, das zu tun, da es mir leichter macht, für meine Medienanfragen unterschiedlich große Bilder derselben Sache zu haben. –

@MarcusBristow: meine Antwort entsprechend Ihrem Vorschlag geändert. Danke, ich habe eine neue Sache von dir gelernt. :) – neophyte

Karussell keine Bilder mit Hintergrund css

Antwort

Verwandte Themen