Jump to content

bootstrap carousels


niklaus
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...