bootstrap carousels

[niklaus]

Hello

I need help writing the php code to upload pictures into a bootstrap carousel slider on my page. The html hard code looks like this:

<div id="myCarousel1" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../Bilder.png.Carusell/Klient-8.png" alt="Edelfrau">
    </div>

    <div class="item">
      <img src="../Bilder.png.Carusell/Klient-9.png" alt="Maennerportrait">
    </div>

    <div class="item">
      <img src="../Bilder.png.Carusell/Klient-4.png" alt="Kind1">
    </div>
    <div class="item">
      <img src="../Bilder.png.Carusell/Klient-5.png" alt="Juengling">
    </div>
    <div class="item">
      <img src="../Bilder.png.Carusell/Klient-3.png" alt="Kind2">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

 

Can anybody help me with the php? I've created a repeater field called slider and the repeater uses an omg-field called "slider_bild".

Thanks for any response.

[flydev]

Hi,

I made a ProcessWire profile powered by Bootstrap 4 with a bootstrap carousel. You can look at the code there : https://github.com/flydev-fr/site-pwbs4/blob/master/templates/_func.php#L213-L250 and adapt it for your need. It should be really easy.

Which version of Bootstrap you are using ? (it look like you are on version 3.. confirm ?)

[niklaus]

Thanks, yes i'm using bootstrap version 3. I'll try your code and let you know if it works...

[niklaus]

What fields did you create for this carousel?

[flydev]

I created a simple image field (wihtout repeater).

If you want a real example on howto use a repeater to make a carousel, tell me your repeater's structure and I will give you a working code but looking at your HTML markup, an Image field only like I did should be sufficient to achieve it.

[catslave]

Exactly what I'am looking for - thanks for that.

[catslave]

... but it won't work. Put the function from github-link above into my _func.php and call in home.php like this: 

<div class="container pt-3">
    <section>
        <?php echo bsRenderCarousel($page->images); ?>
    </section>
</div>

With "echo" the Carousel HTML appears in the source code but not in the browser viewport, without "echo" nothing happened.

My PHP knowledge is quite basic, so I have no idea how to go on.

Will be thankful  for help.

[flydev]

21 hours ago, catslave said:

With "echo" the Carousel HTML appears in the source code but not in the browser viewport, without "echo" nothing happened.

Hi,

the code on Github was updated recently to work with the latest Bootstrap 4 release, that might be the reason. If you see the carousel in rendered HTML code, then you should try to play with the developer console and the display, with, height css properties.

Also, if you want to compare the generated markup, then here you go (in my example, there is 3 images on a images field :

<div id="carousel-144" class="carousel slide shadow" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-144" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-144" data-slide-to="1" class=""></li>
        <li data-target="#carousel-144" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner rounded" role="listbox">
        <div class="carousel-item carousel-item-fluid active" style="background-image: url(/site/assets/files/1/om-psg_cf_finale-2_1.1600x550.jpg);">
            <!--<img src='/site/assets/files/1/om-psg_cf_finale-2_1.1600x550.jpg' alt='' width='1600' height ='550'>-->
        </div>
        <div class="carousel-item carousel-item-fluid" style="background-image: url(/site/assets/files/1/pressesports_2013828_foot_031-1920x768_1.1600x550.jpg);">
            <!--<img src='/site/assets/files/1/pressesports_2013828_foot_031-1920x768_1.1600x550.jpg' alt='' width='1600' height ='550'>-->
        </div>
        <div class="carousel-item carousel-item-fluid" style="background-image: url(/site/assets/files/1/22254435-25040490_1.1600x550.jpg);">
            <!--<img src='/site/assets/files/1/22254435-25040490_1.1600x550.jpg' alt='' width='1600' height ='550'>-->
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-144" 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="#carousel-144" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

 

[catslave]

Hi,

thanks for feedback.

With a HTML file on desktop carousel works fine with: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

The source code via PW looks like yours above. Difference: <div id='carousel-1109' ... but that's PW core stuff I guess.

I call the function in a bootstrap container: <div class="container pt-5 my-5 border">
    <?php echo bsRenderCarousel($page->images); ?>
</div>

The container appears at the expected place but he is collapsed. While mouse over I detect prev and back buttons. Thats all. 

Looks like a CSS issue but I can't follow it.

[catslave]

Sorry for wasting your time, I was friggin' blind : 

put <!--<img src='{$image->size(1600, 550, 100)->url}' alt='{$image->description}' width='1600' height ='550'>-->

to <img src='{$image->size(1600, 550, 100)->url}' alt='{$image->description}' width='1600' height ='550'>

and it works fine.

[flydev]

@catslave

Quote

The container appears at the expected place but he is collapsed. While mouse over I detect prev and back buttons. Thats all. 

if you want to get rid of the images and use only the background-image property, then you have to add this CSS code :

https://github.com/flydev-fr/site-pwbs4/blob/master/assets/static/css/main.css#L38-L44

.carousel-item-fluid {
    width: 100%;
    height: 550px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

 

[catslave]

Thanks for that additional information.