Using Bootstrap's carousel feature on site
I'm working on a project that's turning a static site into a responsive one using Twitter Bootstrap and our original slideshow isn't responsive so I decided to replace it with the one in Bootstrap.
I have it so it's actually grabbing the image of the first slide, its caption, and the link to the article but it doesn't slide when I click to advance to the next slide it just reloads the page. I'm wondering if I'm missing something that allows the images to cycle.
I can't send a link because it's only published to our test destination which only works on our campus but I included a screenshot of the slider. You can see that i recognizes the other 2 slide (three in total) with the circle pagination but it won't scroll.
Here's the page's format. The slider template is the last one in the format:
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output indent="yes" method="xml"/>
<xsl:variable name="issues-base">/alumni/journal/issues/</xsl:variable>
<xsl:variable name="default-page">index</xsl:variable>
<xsl:template match="system-index-block">
<!--//determine the current issue's base folder//-->
<xsl:variable name="current-issue">
<xsl:value-of select="//system-folder[system-page[dynamic-metadata[name='current-issue']/value = 'Yes']]/path"/>
</xsl:variable>
<!--//determine the current page's needed base folder//-->
<xsl:variable name="root-folder">
<xsl:choose>
<!--//when the current page is in the current issue folder//-->
<xsl:when test="//system-page[@current='true']/path[contains(.,$current-issue)]">
<xsl:value-of select="$current-issue"/>
</xsl:when>
<!--//when the current page is NOT within any issue folder, but is not the Archives page//-->
<xsl:when test="//system-page[@current='true']/path[not(contains(.,$issues-base))] or //system-page[@current='true']/path = '/alumni/journal/issues/index'">
<xsl:value-of select="$current-issue"/>
</xsl:when>
<!--//otherwise, the page resides within an archived issue//-->
<xsl:otherwise>
<xsl:value-of select="concat($issues-base,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/'),'/',substring-before(substring-after(substring-after(//system-page[@current='true']/path,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/')), '/'), '/'), substring-before(substring-after(substring-after(//system-page[@current='true']/path, substring-before(substring-after(substring-after(//system-page[@current='true']/path,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/')), '/'), '/')), $issues-base),'/'))"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:apply-templates select="//calling-page/system-page[@current='true']">
<xsl:with-param name="root-folder">
<xsl:value-of select="$root-folder"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<xsl:template match="system-page">
<xsl:param name="root-folder"/>
<xsl:apply-templates select="system-data-structure">
<xsl:with-param name="root-folder">
<xsl:value-of select="$root-folder"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<xsl:template match="system-data-structure">
<xsl:param name="root-folder"/>
<xsl:apply-templates select="impact-image"/>
<xsl:apply-templates select="in-this-issue">
<xsl:with-param name="root-folder">
<xsl:value-of select="$root-folder"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<xsl:template match="in-this-issue">
<xsl:param name="root-folder"/>
<div class="mainContentSection">
<!--// BEGIN: mainContentSection //-->
<h1 class="mainContentTitle">In This Issue</h1>
<div class="borderline"></div>
<div class="articleContainer">
<!--// BEGIN: articleContainer //-->
<div class="articleSection top pos1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="[system-asset]{$root-folder}/contents/presidents-message[/system-asset]">
<!--<a href="/alumni/journal/issues/2014/fall/contents/presidents-message"> -->
<img alt="A Message from the President" src="/alumni/journal/images/message-from-president.jpg" width="100%"/>
</a>
</div>
<div class="articleSection top pos2 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="[system-asset]{$root-folder}/contents/index[/system-asset]">
<img alt="Table of Contents" src="/alumni/journal/images/table-of-contents.jpg" width="100%"/>
</a>
</div>
<xsl:apply-templates select="item"/>
</div>
<!--// END: articleContainer //-->
</div>
<!--// END: mainContentSection //-->
</xsl:template>
<xsl:template match="item">
<div class="articleSection pos1 col-lg-6 col-md-6 col-sm-6 col-xs-12">
<xsl:if test="(position() mod 2) = 0">
<xsl:attribute name="class">articleSection pos2 col-lg-6 col-md-6 col-sm-6 col-xs-12</xsl:attribute>
</xsl:if>
<xsl:choose>
<xsl:when test="article-photo/path != '/'">
<div class="homeArticle ">
<a href="{article/path}">
<img alt="Article" src="{article-photo/path}"/>
</a>
</div>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="article/content/system-data-structure/graphic-thumb/path != '/'">
<div class="homeArticle ">
<a href="{article/path}">
<img alt="Article" src="{article/content/system-data-structure/graphic-thumb/path}"/>
</a>
</div>
</xsl:when>
<xsl:otherwise>
<div class="homeArticle ">
<a href="{article/path}">
<img alt="Article" src="{article/content/system-data-structure/graphic/path}"/>
</a>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
<h2 class="articleTitle">
<a href="{article/path}">
<xsl:value-of select="article/display-name"/>
</a>
</h2>
<div class="articleContent ">
<a href="{article/path}">
<xsl:value-of select="article/description"/>
</a>
</div>
</div>
</xsl:template>
<!--Impact Image-->
<xsl:template match="impact-image">
<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-example-generic"/>
<li data-slide-to="1" data-target="#carousel-example-generic"/>
<li data-slide-to="2" data-target="#carousel-example-generic"/>
</ol>
<div class="carousel-inner" role="listbox">
<xsl:apply-templates select="photo"/>
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>$(document).ready(function() {
$('.item:first-child').addClass('active');
});
$('.carousel').carousel({
interval: 2000
})
</script>
</xsl:template>
<!--Photo-->
<xsl:template match="photo">
<xsl:for-each select="photo">
<div class="item">
<xsl:choose>
<xsl:when test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">
<a>
<xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{
<xsl:value-of select="//system-page[@current='true']/display-name"/>}']);
</xsl:attribute>
<xsl:choose>
<xsl:when test="../link-page/page/path!='/'">
<xsl:attribute name="href">
<xsl:value-of select="../link-page/page/path"/>
</xsl:attribute>
</xsl:when>
<xsl:when test="../link-file/file/path!='/'">
<xsl:attribute name="href">
<xsl:value-of select="../link-file/file/path"/>
</xsl:attribute>
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:attribute name="title">This link will open in a new window</xsl:attribute>
</xsl:when>
<xsl:when test="../link-external/url!='' and link-external/url!='http://'">
<xsl:attribute name="href">
<xsl:value-of select="../link-external/url"/>
</xsl:attribute>
<xsl:if test="../link-external/target = 'New Window'">
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:attribute name="title">This link will open in a new window</xsl:attribute>
</xsl:if>
</xsl:when>
<xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
<xsl:attribute name="href">#</xsl:attribute>
</xsl:when>
</xsl:choose>
<img alt="feature" src="{path}"/>
<xsl:if test="../heading != '' or ../caption != ''">
<div class="carousel-caption">
<span>
<xsl:if test="../heading != ''">
<span class="cs-title-main">
<xsl:value-of select="../heading"/>
</span>
</xsl:if>
<xsl:if test="../caption != ''">
<br/>
<xsl:value-of select="../caption"/>
</xsl:if>
</span>
</div>
</xsl:if>
</a>
</xsl:when>
<xsl:otherwise/>
</xsl:choose>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
I just want to know what I'm missing to complete the slider's functionality.
Screenshot_2015-08-27_10.38.15.png
Discussions are closed to public comments.
If you need help with Cascade CMS please
start a new discussion.
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
1 Posted by matthew.wren on 27 Aug, 2015 06:35 PM
I think I pinpointed the Issue I'm having but I'm not sure how to get around it. For the slide show, at least one of the slide items must have the
.activeclass applied. Very early on in the development added this snippet to the page's format so it would actually work:Is there a way to apply the active class using the format? I remember the first time I added it to the format and every item received the additional class name and it didn't allow the slider to work at all. Advice? here's the entire format:
2 Posted by matthew.wren on 27 Aug, 2015 07:09 PM
Something occurred to me...I'm thinking a solution would involve a jquery
toggleClass()with it defaulting to the first item in the list. When the slider toggles are clicked then it will remove theactiveclass from that item and apply it to the next slide selected (either next or previous slide item). Also automatically with the automatic intervals.I'm just not sure how to create the jquery for the toggleClass and how to apply it to the slide toggle.
3 Posted by Ryan Griffith on 27 Aug, 2015 08:00 PM
Hi Matthew,
Have you tried tweaking your
<xsl:template match="item">to apply theactiveclass whenposition() = 1? This would give you the first item in the list.Please let me know if you have any questions.
Thanks!
4 Posted by matthew.wren on 27 Aug, 2015 08:08 PM
would this apply the
activeclass to the next item when selected as well?5 Posted by Ryan Griffith on 27 Aug, 2015 08:36 PM
Hi Matthew,
The carousel plugin should take care of maintaining the
activeclass for you.If I recall, you just need to provide which slide you want to start out as being active.Please let me know if you have any questions.
Thanks!
6 Posted by matthew.wren on 27 Aug, 2015 08:47 PM
I think I did it incorrectly because now everyone is active. What should I tweak to this?
7 Posted by Ryan Griffith on 28 Aug, 2015 08:05 PM
Hi Matthew,
A couple of things that are jumping out at me, not sure if they will resolve the issue or not:
<xsl:if>, you just want it around the attribute8 Posted by matthew.wren on 31 Aug, 2015 01:57 PM
Hey Ryan,
Ya know, I just decided to take out the pagination for the carousel because our original one didn't have one.
I'm still have issues applying:
Is it somewhere in this section?
9 Posted by Ryan Griffith on 31 Aug, 2015 02:08 PM
Hi Matthew,
You should be able to place that snippet directly after
<div class="item">. Also, if I am following things correctly, you don't need an<xsl:for-each>in your template because the<xsl:apply-templates select="photo"/>will handle that for you.When you have a moment, try something like the following:
Please let me know if you have any questions.
Thanks!
10 Posted by matthew.wren on 31 Aug, 2015 02:52 PM
I think I'm almost there, I think the code between the
</xsl:attribute>and</div>might be misplaced on my part because no image appears now:11 Posted by Ryan Griffith on 31 Aug, 2015 05:56 PM
Hi Matthew,
Are you getting a
<div class="item">or nothing at all? If you are not getting anything, you will need to take a closer look at the<xsl:if>that surrounds the slide content to make sure it is correct or not.Please let me know if you have any questions.
Thanks!
12 Posted by matthew.wren on 31 Aug, 2015 06:05 PM
It's just blank with nothing at all. I published to page so it should be viewable
And do you mean this line?
<xsl:if test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">13 Posted by Ryan Griffith on 31 Aug, 2015 06:16 PM
Correct, and the associated
</xsl:if>at the end of the template. Sounds to me like that conditional isn't working as expected and you will need to adjust it.14 Posted by matthew.wren on 31 Aug, 2015 07:21 PM
I'm really not sure what I have to adjust on it to make it work, I'm a bit lost at this point now.
15 Posted by Ryan Griffith on 31 Aug, 2015 07:35 PM
Hi Matthew,
Did you try removing the
<xsl:if>the surrounds the item's HTML? If not, you should have:16 Posted by matthew.wren on 01 Sep, 2015 07:04 PM
Hi Ryan,
I took the snippet omitting the
<xsl:if>around the html and I get something that looks like the attached image. It appears to only display the img alt tag17 Posted by matthew.wren on 02 Sep, 2015 06:00 PM
Hey Ryan,
Just wondering if there's anything I can do to make this work. I tried editing the format using the page preview option in the editor but I think there's too much info on the page and it crashes on me so I can't use it.
18 Posted by Ryan Griffith on 03 Sep, 2015 11:47 AM
Hi Matthew,
So it sounds like there's an issue with the
<xsl:if>. I'd be happy to help take a closer look if you can attach your Format in it's current state and sample XML.Thanks!
19 Posted by matthew.wren on 03 Sep, 2015 12:51 PM
Sure thing!
Attached is the format and here's the link to the XML
http://www.scranton.edu/alumni/journal/index.xml
20 Posted by Ryan Griffith on 04 Sep, 2015 01:40 PM
Hi Matthew,
It looks as though the XML you linked to doesn't match what the Format is expected. When you have a moment, please use the Preview Options when editing the format and grab that XML.
Thanks!
21 Posted by matthew.wren on 04 Sep, 2015 01:52 PM
Aw sorry about that. I was hoping that'd work because every time I do it the way you suggest my tab crashes on me. I think there's a lot of information on that page. Is there another way to get the page XML in that format in case I can't get it through the Preview Option?
22 Posted by matthew.wren on 04 Sep, 2015 02:27 PM
I think I finally got it! Yeah it's quite long, I'm not sure why it's so massive but I'm hoping it'll help!
23 Posted by matthew.wren on 09 Sep, 2015 03:23 PM
Hey Ryan,
Great news, I figured out what the problem was with the site. I got the slider working with the data definition inputs but while working within a new output for the site, I misplaced the head tags that carried the JS files needed for the slider to function correctly.
Sorry about all the back and forth on this one but it's actually working now
http://www.scranton.edu/alumni/journal/issues/2015/spring/index.html
24 Posted by Ryan Griffith on 09 Sep, 2015 03:38 PM
Thank you for following up, Matthew, I am glad to hear you were able to get things working.
Have a great day!
Ryan Griffith closed this discussion on 09 Sep, 2015 03:38 PM.