Slideshow problem

Hi,

Here is the code that is missing:

<div class="item active">

Looks like this needs to appear for the first image and then the following ones use this code:

<div class="item">

To do this, you can start a counter, use a if statement to only display the first line of code if the counter is 1 or else display the 2nd line of code. 
Make sure you increment your counter inside the loop so it only matches one time :  $counter++

Let me know if this make sense and/or if you have any questions.

Thanks for the reply, Damon.

I noticed that difference between the static and CMSB code, but don't know how to get only the first slide to have the "active" setting. Can you point me in the right direction, please?

Hi again,

Try this code:

<div id="carousel-example-generic" class="carousel  slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $counter = 1; ?>
<?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>  
<?php if($counter == 1) : ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>  
<div class="item">
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<div class="carousel-caption">
<div class="jumbotron__container">
<?php echo htmlencode($upload['info1']) ?>
</div>
</div>
</div>
<?php $counter++; ?>
<?php endforeach ?>


<!-- Controls -->
<a class="left  carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon  glyphicon-chevron-left"></span>
</a>
<a class="right  carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon  glyphicon-chevron-right"></span>
</a>
</div>

And if this doesn't work, send me an email with your FTP details (don't post here) to support@inteactivetools.com so I can help.

Hi, Damon.

The site is hosted on a secure server and uses a private key, not a password, to login. Sending you FTP details might not be much help.

Unfortunately, the slideshow still isn't working, and I can't figure out where I'm going wrong.

This static version shows how it should look and function - http://www.mountainoakcheese.com/index.php - and this version uses an adapted version of your code - http://www.mountainoakcheese.com/index1.php . As you can see, the elements are showing up now, but some are overlapping (the text) while others are appearing in rows (the images).

I've attached both versions of the page; perhaps these might help?

I appreciate your patience with this.

Hi,

I use a program called WinMerge to compare the code for the working slideshow and the broken one.

Here is the code that is different:

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

For the working one, there is a list item for each image with an increment number for the data-slide-to. Also the first image list item has class="active".

Will write up some code for this, test and post soon.

Hi there, can you try this code? I think there's a misaligned closing <div> tag that needs to be fixed.

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>  
<div class="item<?php echo $index == 0 ? ' active' : ''; ?>"> 
<img src="<?php echo $upload['urlPath'] ?>" />
<div class="carousel-caption">
<div class="jumbotron__container">
<?php echo htmlencode($upload['info1']) ?>
</div>
</div>
<?php endforeach ?>
</div>

There is definitely a missing div tag here somewhere. Let's try again:

<div id="carousel-example-generic" class="carousel  slide" data-ride="carousel">
<!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

        <?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?> 
        <div class="item<?php echo $index == 0 ? ' active' : ''; ?>">
            <img src="<?php echo $upload['urlPath'] ?>" alt="">
            <div class="carousel-caption">
                <div class="jumbotron__container"><?php echo htmlencode($upload['info1']) ?></div>
            </div>
        </div>
        <?php endforeach; ?>

    </div>

    <!-- Controls -->
    <a class="left  carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon  glyphicon-chevron-left"></span>
    </a>
    <a class="right  carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon  glyphicon-chevron-right"></span>
    </a>
</div>

This should replace all your code, it's basically the same as what you originally posted except with the proper PHP added.

Major success! http://www.mountainoakcheese.com/index1.php

The only minor thing is the circles that appear near the bottom of the slides. I can only see two, whereas there should be three to match the number of slides.

Ah, I see the indicators need to be changed as well. Try this:

<div id="carousel-example-generic" class="carousel  slide" data-ride="carousel">
<!-- Indicators -->
    <ol class="carousel-indicators">
        <?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>
        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $index; ?>"<?php echo $index == 0 ? ' class="active"' : ''; ?>></li>
        <?php endforeach; ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

        <?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?> 
        <div class="item<?php echo $index == 0 ? ' active' : ''; ?>">
            <img src="<?php echo $upload['urlPath'] ?>" alt="">
            <div class="carousel-caption">
                <div class="jumbotron__container"><?php echo htmlencode($upload['info1']) ?></div>
            </div>
        </div>
        <?php endforeach; ?>

    </div>

    <!-- Controls -->
    <a class="left  carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon  glyphicon-chevron-left"></span>
    </a>
    <a class="right  carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon  glyphicon-chevron-right"></span>
    </a>
</div>