Cathryn Warren
asked on
Creating a slider
I'm trying to edit some code which originally had a fixed background with a text slider across the top. I want to make the background and the text be a slider.
Below is what I have which is not working. I don't work with code so I may have made a hash of this!
And the CSS:
It calls the right information for 'slide_image', 'slide_title' and 'slide_desc' but doesn't display properly.
Thanks to anyone who can point me in the right direction.
Below is what I have which is not working. I don't work with code so I may have made a hash of this!
<?php
/**
* This file is responsible for the rendering of the header of the front page.
*/
?>
<!-- Home Slider -->
<div id="home">
<?php
if (get_theme_mod('topslider_slides')) {
foreach (get_theme_mod('topslider_slides') as $slide) {
?>
<!-- Banner Image -->
<div id="banner_image" class="hero_img" style="background-image:url(<?php echo $slide['slide_image']; ?>)">
<!-- Banner TEXT Slides -->
<div id="text_slider" class="top_slider">
<div class="hero_text item">
<h3><?php echo $slide['slide_title']; ?></h3>
<p><?php echo $slide['slide_desc']; ?></p>
</div>
</div>
</div>
<?php
}
}
?>
</div>
<!-- Home Slider -->
And the CSS:
#text_slider{
position: absolute;
top: 0;
left: 0;
color: #FFF;
display: inline-block;
background: rgba(0, 0, 0, 0.3);
text-align:center;
padding-top:15%;
height:600px;
overflow-y:hidden;
}
.hero_text h3{
vertical-align: middle;
font-size: 50px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
}
.hero_text p {
font-size: 18px;
color: #fff;
}
.hero_img{
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
height:600px;
}
It calls the right information for 'slide_image', 'slide_title' and 'slide_desc' but doesn't display properly.
Thanks to anyone who can point me in the right direction.
We need to see more code and a link if possible. What does your JavaScript look like for instance.
ASKER
No worries thanks Julian. I have erred on including more of the js than probably necessary.
/*---------------------------------*/
/* Modules Sliders
/*---------------------------------*/
/*Top Slider-----------------------*/
$(".top_slider").owlCarousel({
singleItem: true,
autoPlay: NT_CustomJS.homepage_topslider_interval,
pagination: true,
lazyLoad : true,
afterInit: function() {
jQuery("#text_slider").addClass("loaded");
}
});
/*gereric--------------------------*/
$(".module_slider_single_item").owlCarousel({
singleItem:true,
autoPlay: 3000,
pagination: true,
afterInit: function() {
jQuery(".module_slider_wrapper").addClass("loaded");
jQuery(".module_slider").addClass("loaded");
}
});
$(".module_slider_three_items").owlCarousel({
items: 3,
autoPlay: 3000,
pagination: true,
afterInit: function() {
jQuery(".module_slider_wrapper").addClass("loaded");
jQuery(".module_slider").addClass("loaded");
},
itemsDesktop: [1200,3]
});
$(".module_slider_four_items").owlCarousel({
items: 4,
autoPlay: 3000,
pagination: true,
afterInit: function() {
jQuery(".module_slider_wrapper").addClass("loaded");
jQuery(".module_slider").addClass("loaded");
}
});
/*Team-----------------------------*/
/* $(".team_slider").owlCarousel({
items: 3,
autoPlay: 3000,
pagination: true,
});
*/
/*Twitter--------------------------*/
/* $(".twitter_tweets").owlCarousel({
singleItem: true,
autoPlay: 3000,
pagination: true,
});*/
/*Testimonial---------------------*/
/* $(".testimonials_slider").owlCarousel({
singleItem: true,
autoPlay: NT_CustomJS.homepage_testimoial_interval,
pagination: true,
});*/
/*Services------------------------*/
/*
$(".Services_Carousel").owlCarousel({
items: 3,
autoPlay: NT_CustomJS.services_slider_time,
pagination: true
});
*/
});// Ready
/* Window LOAD */
$(window).load(function(){
//Delcear some Vars//
// Get the height of nav wrapper
var Nav_wrapper_height = $("#nav_wrapper").outerHeight();
if(NT_CustomJS.floatmenu==1){
// NAV bar offset
var nav_bar_element = $('#nav_wrapper');
var nav_bar_offset = nav_bar_element.offset();
var nav_bar_offset_top = nav_bar_offset.top;
// Changing Header on Scrolling //
// Show Navigation
if($( window ).scrollTop()>=nav_bar_offset_top)
{
nav_bar_element.addClass("fixed");
}
else{
nav_bar_element.removeClass("fixed");
}
// Scrolling Fixed Nav bar fix
$(window).scroll(function() {
// FOR HEADER MENU TO FIX ON SCROLL //
if($( window ).scrollTop()>=nav_bar_offset_top)
{
nav_bar_element.addClass("fixed");
}
else{
nav_bar_element.removeClass("fixed");
}
});
}// floatmenu
/* Scrolling Menues */
$('.page-scroll a, .page-scroll-button').bind('click', function(event) {
var $anchor = $(this);
// Fix issues of scrolling cauisng of fixed menue
if($("#nav_wrapper").hasClass("fixed")){
var scrolltop = $($anchor.attr('href')).offset().top;
}
else{
var scrolltop =$($anchor.attr('href')).offset().top - Nav_wrapper_height ;
}
// fix issue causing of not adding sectio class
if(!$anchor.hasClass(".section"))
{
var scrolltop = scrolltop - Nav_wrapper_height+1;
}
// Now lets animate it
$('html, body').stop().animate({
scrollTop: scrolltop
}, 1500, 'easeInOutExpo');
event.preventDefault();
// HERE WE ADD ACTIVE CLASS
// lets remove first
$(".page-scroll a").each(function(){
$(this).removeClass("active");
})
$anchor.addClass("active");
});
Ok but we still don't have enough to replicate the issue. Without seeing something very difficult to imagine - time required to sift through code is simply not available. The more we can visualise the quicker we find a solution.
If you can't post a link to the page - can you do a view source of your page and post that HTML here.
If you can't post a link to the page - can you do a view source of your page and post that HTML here.
ASKER
I removed the background because it wasn't working. This is the link at the moment - site.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you so much Julian I really appreciate it!
ASKER
Thank you!
You are most welcome.
Going forward, you can use multiple topic areas when you post questions at E-E. For example, you could post this sort of question in the WordPress Topic Area. More (appropriate) topics == more sets of eyes on the problem == faster solutions!
https://www.experts-exchange.com/topics/wordpress/
https://www.experts-exchange.com/topics/wordpress/
ASKER
Thanks Ray, that's a very good point. Taken on board.
ASKER
I think the javascript would relate to the below? But I could be wrong...
Open in new window