Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#948638

Hi
Kindly apply the caruosel slider like the example given Here
The current custom html code for the slider not working due the the different formating .

Hope it helps .

[roxxsolid Friend roxxsolidJoin date: June 2009Posts: 32Downloads:28Uploads:9 Thanks: 7]

#949307

But what’s wrong with the current code is what I’m not understanding….all I did was change out the images that were in that carousel….

[roxxsolid Friend roxxsolidJoin date: June 2009Posts: 32Downloads:28Uploads:9 Thanks: 7]

#949316

Here is the current code I have on the page….

<div class="about-client clearfix">
<div class="col-sm-3 client-list-header">
<h2 class="title-sanserif">Accredidations</h2>
</div>
<div class="col-sm-9 client-list-slide">
<div id="client-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="row item active">
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2011.jpg" alt="Angie's List 2011" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2012.jpg" alt="Angie's List 2012" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2013.jpg" alt="Angie's List 2013" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2014.jpg" alt="Angie's List 2014" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2015.jpg" alt="Angie's List 2015" border="0" /></div>
</div>
<div class="col-sm-4"> </div>
</div>
</div>
</div>
</div>
</div>

[roxxsolid Friend roxxsolidJoin date: June 2009Posts: 32Downloads:28Uploads:9 Thanks: 7]

#949369

And I want to make sure it looks and works like the carousel in the JA Decor demo site. Can you help me figure out what’s wrong with my code?

[roxxsolid Friend roxxsolidJoin date: June 2009Posts: 32Downloads:28Uploads:9 Thanks: 7]

#949383

Okay, so I played with the code a bit and I got it to display only 3 at a time like I wanted (all on one row). But the left and right arrows that should appear underneath the word "Awards" (like they do in the Carousel on the JA Decor demo) don’t show up.

Any help on that part?

The updated code is below…

<div class="about-client clearfix">
<div class="col-sm-3 client-list-header">
<h2 class="title-sanserif">Our Awards</h2>
</div>
<div class="col-sm-9 client-list-slide">
<div id="client-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="row item active">
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2011.jpg" alt="Angie's List 2011" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2012.jpg" alt="Angie's List 2012" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2013.jpg" alt="Angie's List 2013" border="0" /></div>
</div>
</div>
<div class="row item">
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2014.jpg" alt="Angie's List 2014" border="0" /></div>
</div>
<div class="col-sm-4">
<div class="client-logo"><img src="images/awards/Award_Angies-List-2015.jpg" alt="Angie's List 2015" border="0" /></div>
</div>
<div class="col-sm-4"> </div>
</div>
</div>
</div>
<div class="client-slider-control"> </div>
</div>
</div>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#949427

Hi
The problem is with the editor , when u adding the code in editor , it remove some scripts .
like the navigation part is remove . Here is the code

Find this code in your custom html module and replace it
<div class="client-slider-control">
with this code

<div class="client-slider-control">
        <a class="left carousel-control" href="#client-slider" data-slide="prev">
          <i class="fa fa-angle-left"></i>
        </a>
        <a class="right carousel-control" href="#client-slider" data-slide="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>

before edit the module Go to system > Global config. > Default editor > NONE .
Save and then edit the module .

1 user says Thank You to Pankaj Sharma for this useful post

1. roxxsolid

[roxxsolid Friend roxxsolidJoin date: June 2009Posts: 32Downloads:28Uploads:9 Thanks: 7]

#949439

Awesome! That worked like a charm! Thanks….you’re a life saver! 🙂

[Author]

Posts