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.

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>