Slideshow in selfmade

Permalink 1 user found helpful
Hey Guys,

im Working on a self made News carousel for my theme.
its fully responsive and works well.... but it wont get the slider-tab information. ( see picture attached ) there are just numbers like 1,2,3,4,5 ....

how do i connect automatically the slider tabs with the news link name.

here´s my code:
HTML

"<div id="container">

<div class="container">
<div class="clearfix">
<?php
$a = new Area('News');
$a->enableGridContainer();
$a->display($c);
?>
</div>
</div>
"
CSS
.rslides {
margin-bottom: 0.5em;
}

.rslides .ccm-image-slider-text {
left: 0.5em;
top: auto;
bottom: 5px;

}

.rslides .ccm-image-slider-text > p {
display: none;
color: #fff;
}

.rslides_tabs {
list-style-type: none;
padding: 0;

}

.rslides_tabs > li > a {
content: inherit;
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #f6f6f6;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}

.rslides_tabs > li > a:hover{
background: #eee;
}

.rslides_tabs > li > a:before {
content: '>';

position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #20b6ad;
color: #fff;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}

.rslides_tabs > li > a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}

.rslides_tabs > li > a:hover:after{
left: -.5em;
border-left-color: #20b6ad;
}

.rslides_here:active {
}

1 Attachment

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Fontaine,

What version of concrete5 are you using?

To clarify, you changed the CSS of the Image Slider block so it looks like it has tabs?

Which "slider-tab" information are you referring to? Do you mean the title of the image slide?
Fontaine replied on at Permalink Reply
Hey,

i use concrete 5.7.4.2
the Image Slider works perfect. the News headline and the news-description works perfect too. as u can see in the image, the slider tabs dont show the headline info, they just show 1,2,3,4,5. the tabs are connected and i see the switching when the image slider change. I want to change the "numbers" with the headline information from the imageslider into the tabs.

i use the concrete slideshow block and the bullets element for linking.
my sitemap has a news are with diffrent news sites. this is the content for the imageslider. the connection works perfect.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Replacing the numbers with the image slide title will require modifying the JavaScript that creates the image slider.
concrete\blocks\image_slider\view.js

The JavaScript for the image slider is minified, and even if beautified, it will be hard to figure out.

You can get the unminified JavaScript here:
https://github.com/viljamis/ResponsiveSlides.js/blob/master/responsi...