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 {
}
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 {
}
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.
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.
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...
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...
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?