I've been developing a wordpress template with a bootstrap (3.3.6.) carousel news slider. But the slides timing is all wrong after a few seconds. I already set a timer in custom.js, but it only worked on the news button (replacement of indicator), while the slides are moving way too fast after a few seconds.The weirdest thing is, if I change the bootstrap link to the cdn, the slides move properly but the news button are not moving at all. Any ideas on how to fix this?
This is the website for you to review: http://tfcakalimantan.org
The front-page.php
<?php
$args = array(
'post_type' => 'post',
'tag' => 'featured',
'posts_per_page' => 5
);
$the_query = new WP_Query( $args );
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="list-group col-sm-4" style="padding-right: 0px;"> <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="list-group-item <?php if( $the_query->current_post == 0) echo 'active'; ?>"><h5><?php the_title(); ?></h5></li><?php endwhile; endif; ?>
</ol>
<?php rewind_posts(); ?>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true);
?>
<div class="item <?php if( $the_query->current_post == 0) echo 'active'; ?>">
<img src="<?php echo $thumbnail_url[0]; ?>" class="img-responsive" alt="<?php echo $thumbnail_meta; ?>">
<div class="carousel-caption">
<p><?php the_title(); ?></p>
</div></div>
<?php endwhile; endif; ?>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
<!-- Controls -->
<div class="row">
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="fa fa-arrow-circle-left fa-2x"></i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="fa fa-arrow-circle-right fa-2x"></i>
</a>
</div>
</div>
</div><!-- End Carousel -->
The custom.js
// Carousel
$(document).ready(function(){
var clickEvent = false;
$('#myCarousel').carousel({
interval: 2000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
});
$(window).load(function() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
The style.css
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
font-family: 'Droid Sans', sans-serif;
color: #FFFFFF;
}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
font-family: 'Pontano Sans', sans-serif;
}
#myCarousel .list-group-item {
border-radius:0px;
cursor:pointer;
}
#myCarousel .list-group .active {
background-color:#6D9755;
}
#myCarousel .item {
height: 300px;
}
.carousel-controls {display:none;}
Related
I'm fetching data using for loop and echo results on a page. How do I output the results in a slider effect?
I have tried a simple CSS slider but can't get the intended result. What I end up getting is everything output in page and no sliding effect.
Part of my PHP code that echo the output...
for ($i=0, $n=count($rows); $i < $n; $i++) {
//echo "<tr><td>".
($row = $rows[$i]);
//."</td></tr>";
$link_detail = JRoute::_('index.php?option=com_jblance&view=user&layout=viewprofile&id='.$row->user_id.$Itemid);
$link_invite = JRoute::_('index.php?option=com_jblance&view=project&layout=invitetoproject&id='.$row->user_id.'&tmpl=component');
?>
<div class="slider">
<div class="media style_prevu_kit">
<div class="center">
<?php
if($show_logo){
$link = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
$attrib = 'style="width: 162px; height: 162px; float:center; margin: 0 auto; border-radius: 100px"';
//echo JblanceHelper::getLogo($row->user_id, $attrib);
echo "<a href='".$link_detail."' class='link'>".JblanceHelper::getLogo($row->user_id, $attrib)."</a>";
//echo $link_detail;
} ?>
</div>
<div class="media-body">
<h5><?php //$username = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
$getUsername = $row->$nameOrUsername;
$nameorUsername = truncate($getUsername, 5);
echo LinkHelper::GetProfileLink($row->user_id, $nameorUsername);
//echo truncate($username, 15);
?></h5>
<?php //<?php echo JblanceHelper::getCategoryNames($row->id_category, 'tags-link', 'user'); ?>
</span>
<br /><br />
</div>
<div class="center">
<input type="button" value="Hire Me" class="button_add button_curved_blue color-a">
</div>
<div class="lineseparator"></div>
<div class="container">
<div class="content">
<div class="grid-2">
<button class="color-b circule"> <i class="fab fa-dribbble fa-2x"></i></button>
<h6 class="title-2">12.3k</h6>
<p class="followers">Followers</p>
</div>
<div class="grid-2">
<button class="color-c circule"><i class="fab fa-behance fa-2x"></i></button>
<h6 class="title-2">16k</h6>
<p class="followers">Followers</p>
</div>
<div class="grid-2">
<button class="color-d circule"><i class="fab fa-github-alt fa-2x"></i></button>
<h6 class="title-2">17.8k</h6>
<p class="followers">Followers</p>
</div>
</div>
</div>
</div>
</div>
<?php
}
A very simple slider CSS...
.slider {
white-space: nowrap;
oveflow:hidden;
}
.slider>div {
white-space: normal; /* reset "nowrap" above */
display: inline-block;
transition: margin-left 0.8s cubic-bezier(0.5, 0.1, 0.5, 1.25);
/* the above transition gives a neat little "bounce-back" effect */
}
And 1 line of JavaScript...
<script>
theSlider.children[0].style.marginLeft = (-100*pageID)+"%";
</script>
What I get now is this...
While I need all 8 cards to automatically be sliding in 1 row or to have previous and next buttons to transition between the cards
I've got a bootstrap accordion panel, and the panels aren't collapsing like they should when I click on them if they're already open. I can't figure out why. I had this working with the panels hard coded, but once I set up wp_query to load the panels, everything worked except the panels closing.
the function:
<script>
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -50
}, 500);
}
});
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
and the nested loops to generate the accordion panels:
<div class="home-contents">
<div class="container">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="faqheading"><?php the_title(); ?></h1>
<!-- <div class="col-sm-9" style="float: none; margin: auto;"><?php the_content(); ?></div> -->
<?php endwhile; ?>
<div class="clear"></div>
</div> <!-- row -->
</div> <!-- container -->
<div class="blog-page">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<div class="container">
<div class="panel-group" id="accordion">
<?php
/*
* Loop through Categories and Display Posts within
*/
$post_type = 'faq';
// Get all the taxonomies for this post type
$taxonomies = get_object_taxonomies( array( 'post_type' => $post_type ) ); /* gets taxonomy from posts */
foreach( $taxonomies as $taxonomy ) :
// Gets every "category" (term) in this taxonomy to get the respective posts
$terms = get_terms( $taxonomy );
foreach( $terms as $term ) : ?>
<div class="groupheading col-sm-3"><h5 style=" color: #3fa9f5; font-size: 24px; font-weight: 300;"><?php echo $term->name; ?></h5></div>
<?php
$args = array(
'post_type' => $post_type,
'posts_per_page' => -1, //show all posts
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'field' => 'slug',
'terms' => $term->slug,
'orderby' => 'collapse id',
'order' => 'desc'
)
),
'order' => 'DESC'
);
?>
<?php
$posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="panel panel-default col-sm-9">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo 'collapse'.get_the_id();?>"><?php $value = get_field( "faq_heading"); echo $value; ?></a>
</h4>
</div>
<div id="<?php echo 'collapse'.get_the_id();?>" class="panel-collapse collapse">
<div class="panel-body col-sm-9">
<p><?php $value = get_field( "faq_text", false, false); echo $value; ?></p>
</div>
</div>
</div> <!-- .panel -->
<?php endwhile;?>
<div class="panel panel-default col-sm-9 mobilehide" style="height: 45px;"></div>
<div class="groupheading col-sm-3 mobilehide" style="height: 45px;"></div>
<?php
endif; ?>
<?php endforeach;
endforeach; ?>
</div> <!-- .panel-group -->
</div><!-- end col-sm-12 -->
</div> <!-- end row -->
</div><!-- end container -->
</div><!-- end blog-page -->
</div> <!-- .container -->
Edit: Ok, I've added the following but it's still not working:
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).parentsUntil(".panel-default").find(.children(".panel-collapse")).removeClass("in");
});f
});
</script>
2nd edit: I feel like the issue is that .parent isn't finding the right element, but I'm not sure how to direct it correctly.
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).addClass("collapsed");
$(this).parent().find(".panel-collapse .collapse").removeClass(".panel-collapse .collapse").addClass(".panel-collapse .collapse .in");
$(this).find().parent('.collapse.in').removeClass(".panel-collapse.collapse").addClass(".panel-collapse.collapse.in");;
});
});
</script>
Ok, I've solved this. I had originally built this page as part of a wordpress site, and I had included the bootstrap code at the top of the template. In the process of rebuilding the whole site, I put a new bootstrap include in the header file for the site. I left the old include at the top of my template when I got around to working on this particular page, and this redundancy of code was, somehow, causing the collapse to function incorrectly. I still don't know/understand why this was the case, but I've got it working correctly now.
I realize I didn't actually get any responses to this, but thank you to everyone who at least looked.
I have successfully implemented slider on view page but in jquery response i dont understand y slider is not moving and i dont know where i am doing wrong. Actually i ve loaded data in jquery response which is coming from database.
Here is my successful view page for slider:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width:640px;">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" id="slider">
<?php $count=1; if($inspection_images !=''){ foreach($inspection_images as $img){?>
<div class="item <?php if($count==1){ echo 'active'; } ?>">
<img class="img-responsive" src="<?php echo base_url();?>uploads/inspection/<?php echo $img->attachment_saved_name; ?>" alt="...">
<div class="carousel-caption">
<?php echo $img->attachment_name.' ('.$img->column_name.')'; ?>
</div>
</div>
<?php $count++; }} ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
which successfully produces this:
and now i want to do the same thing in jquery reponse to set those data in slider:
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
// alert((JSON.stringify(resp)));
// var count=1;
var json_arr = JSON.parse(JSON.stringify(resp));
<?php $count=1; ?>
if(json_arr != null)
{
<?php $count=1; ?>
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
/* $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/
$('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');
<?php $count++; ?>
}
}
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}
but i get this only:
, slider is not moving. Any idea where in my jquery i am doing wrong?
After Ajax response, when you bind HTML in your slider div, you have to call $('.carousel').carousel();
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
// alert((JSON.stringify(resp)));
// var count=1;
var json_arr = JSON.parse(JSON.stringify(resp));
<?php $count=1; ?>
if(json_arr != null)
{
<?php $count=1; ?>
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
/* $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/
$('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');
<?php $count++; ?>
}
}
$('.carousel').carousel();
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}
I have a php that looks like this
<?php
echo "<html><head><meta charset='utf-8'>";
echo "<script type='text/javascript' src='scripts/bootstrap.js'></script>";
echo "<script type='text/javascript' src='scripts/jquery_latest.js'></script>";
echo "<link rel='stylesheet' type='text/css' href='css/style.css'>";
echo "<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>";
//echo "<script type='text/javascript' src='scripts/gallery.js'> - other gallery
echo "<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>";
echo" <title>Gallery Display</title></head><body>";
echo "<div id ='wrapper'>";
echo "<header>";
echo "<h1>The Ultimate Gallery Compiler</h1>";
echo "<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>";
echo "</header>";
echo "<div id='content'>";
echo "<h2>Browse Gallery</h2>";
$subfolder = $_POST["category"];
$text = $_POST["category_text"];
if ($subfolder == "0"){
echo("Please <a href='gallery.html'>go back</a> and select a category");
echo "</div><br><br>";
echo "<footer>";
echo "<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>";
echo "</footer>";
echo "</div>";
exit();
}
$countcontents = file_get_contents("categories.txt"); //read file to get count
$countarray = explode('*', $countcontents); //get count of each category into an array
//get array using array_push
$folders = glob('images/*');
$categories= array();
foreach($folders as $folder) {
$folder = pathinfo($folder);
array_push($categories, $folder["filename"]);
}
//output title according to if the gallery has images in it or not
for($i=0; $i< count($countarray); $i++)
{
if ($subfolder == $categories[$i]){
if (intval($countarray[$i]) == 0) {
echo "<h3>No images have been uploaded for the " .$text. " category yet</h3>";
}
else
{
echo "<h3>Here are the images for the " .$text. " category</h3>";
echo "<p>There are ".$countarray[$i]." photos in this category</p><br>";
}
}
}
$folder = "images/".$subfolder."/";
// Open the appropriate subfolder, and display its contents.
if ($dir = opendir($folder)) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
$count=0;
$class= '';
echo'<div id="myCarousel" class="carousel slide">';
// <!-- Carousel items -->
foreach($images as $image) {
$count++;
if ( $count == 1 ){ $class = 'active ';}
else{ $class='';}
echo'<div class="carousel-inner">';
echo"<div class='".$class."item'>";
echo "<img src='".$folder.$image. "'</img></div>";
echo '</div>';
}
//<!-- Carousel nav -->
echo'<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo'<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
echo '</div>';
echo '<ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol>';
echo"<br><br>";
echo "<p> </p><a href='gallery.html'>Reselect</a>";
echo "</div>";
echo "<footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer>";
echo "</div>";
echo "</body></html>";
?>
As you can see bootstrap (min) is included, along with the combined css and jquery 11.3. the bootstrapgallery.js is a function that i took from a fiddle
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slide', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
I have the link being tested out here. The first image shows but neither the arrows or the buttons work. I feel like i must be missing something blatantly obvious, but the code is the same as my fiddle so i don't understand!
Help! Thanks :) And Merry Christmas hohoho
EDIT:
this is my source:
<!doctype html>
<html><head><meta charset='utf-8'>
<script type='text/javascript' src='scripts/jquery_latest.js'></script>
<script type='text/javascript' src='scripts/bootstrap.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>
<!---echo "<script type='text/javascript' src='scripts/gallery.js'>-->
<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>
<title>Gallery Display</title></head><body>
<div id ='wrapper'>
<header>
<h1>The Ultimate Gallery Compiler</h1>
<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>"</header>
<div id='content'>
<h2>Browse Gallery</h2>
<h3>Here are the images for the Fashion/Lifestyle category</h3><p>There are 9 photos in this category</p><br><div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class='active item'><img src='images/1/dress3_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/after_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/partydress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151219.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/shoesforwedding_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/pyjamas_20151215.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/interviewdress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151221.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/jacket_20151213.jpg'</img></div></div><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div><ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol><br><br><p> </p><a href='gallery.html'>Reselect</a></div><footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer></div></body></html>
Your HTML structure should look like below, but you have a carousel-inner class wrapping each item in your HTML loop, which should not be.
Should be like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="" alt=""/>
</div>
<div class="item">
<img src="" alt=""/>
</div>
</div>
</div>
Yours looks like this:
<div id="myCarousel" class="carousel slide">
<div class="item">
<img src="" <="" img="">
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
</div>
I have a theme with two toggle menu options (standard and mobile with hover effect).I'm trying to replace the hover with an off-canvas menu solution taking in consideraion this described procedure.
After I've updated the css style code using the custom css field option, I've uploaded to the server and registered in script-calls.php(instead of calling in footer.php) classie.js and sidebarEffects.js files :
...
// Main Scripts
function register_js() {
if (!is_admin()) {
$url_prefix = is_ssl() ? 'https:' : 'http:';
// Register
wp_register_script('classie', THB_THEME_ROOT . '/assets/js/plugins/classie.js', 'jquery', null, TRUE);
wp_register_script('sidebarEffects', THB_THEME_ROOT . '/assets/js/plugins/sidebarEffects.js', 'jquery', null, TRUE);
// Enqueue
wp_enqueue_script('classie');
wp_enqueue_script('sidebarEffects');
wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}
}
...
The original theme mobile menu section in header.php looks like this:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<nav id="mobile-menu">
<div class="menu-container custom_scroll">
<div class="menu-holder">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="mobile-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</div>
<div class="menu-footer">
<?php echo do_shortcode($menu_footer); ?>
<?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?>
</div>
</div>
<div class="spacer"></div>
</nav>
<!-- End Mobile Menu -->
<!-- Start Quick Cart -->
<?php do_action( 'thb_side_cart' ); ?>
<!-- End Quick Cart -->
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
(not so sure if it's ok), I've modified/replaced the above section with:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="st-container" class="st-container">
<!-- content push wrapper -->
<div class="st-pusher">
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Start Mobile Menu -->
<nav id="primary-navigation" class="st-menu st-effect-3" id="menu-3" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'notio-wp' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'notio-wp' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
<!-- End Mobile Menu -->
...
Also in footer.php I've closed these divs:
...
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->
</body>
</html>
Unfortunately, my result is not functional.The final goal is to obtain the off-canvas menu effect on the right side as alternative to the hover menu, using the existing toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated). Any thoughts or any other solution with the same effect will be much appreciated.Thanks