We Keep Coding

How to stop carousel auto-slide in mobile devices only?

I'm trying to stop my carousel to auto slide for mobile devices only. I tried to change the data-interval thru js but it's not working for some reason. Any idea how to do it?
Here is my html code for the carousel:
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="img/hero-slide-2.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-3.jpg" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-4d.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->

Try first to remove data-ride="carousel" from html, and then use some custom width that you are happy to disable slider for, something like this: (custom BP var is breakpoint)
// set breakpoint width
var BP = 900;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 5000 });
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->

Displaying canvas between div background image and rest of div content

I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>

Make text change depending on white slide is active in bootstrap carousel

So I need to change the text of something that is in a different column depening on which slide is active. I can't seem to figure out where I am going wrong here.
HTML:
<div class="col-sm-6">
<h1>Recent News</h1>
<p id="CarouselMessage">Hello World</p>
</div><!-- Column 6 -->
<div class="col-sm-6">
<div id="Carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#Carousel2" data-slide-to="0" class="active"></li>
<li data-target="#Carousel2" data-slide-to="1"></li>
<li data-target="#Carousel2" data-slide-to="2"></li>
<li data-target="#Carousel2" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" id="newscarousel" role="listbox">
<div class="item active">
<img src="news.png" alt="Chania">
</div>
<div class="item">
<img src="news.png" alt="Chania">
</div>
<div class="item">
<img src="news.png" alt="Flower">
</div>
<div class="item">
<img src="news.png" alt="Flower">
</div>
</div><!-- Carousel inner -->
</div><!-- CAROUSEL 2 -->
</div><!-- Column 6 -->
And here is the javascript to make the p tag with the ID CarouselMessage change depending on which slide is active.
$(document).ready(function () {
var arrMessages = ["this is a test", //set your messages here in an array
"It worked for Image 2 class!",
"It worked for Image 3 class!"]
var $msg = $("#CarouselMessage");
$('#Carousel2').on('slid.bs.carousel', function () {
var text = "",
$active = $('div.active'),
index = $('div.item').index($active); //check the index of active item
$msg.text(arrMessages[index]); //fetch the value from array based on the index of the item and display.
});
});

Any idea why my carousel does not automatically change pics?

I am trying to make a carousel on my website, so that it will automatically change four pictures around. Here is my code, however I am stuck in trying to figure out why it wont change any of the pictures:
<div class="carousel">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#homeCarousel').carousel({
interval:3000,
pause: "false"
});
});
</script>
<!-- Carousel start -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="images/l1.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="images/l2.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="images/l3.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
<!-- Carousel end -->
</div>
I have tried doing changing the interval times, reformatting everything, checking out different post however I just cannot seem to figure it out.
Any idea what could be the problem?

Just to clarify, the bootstrap carousel is heavily dependent on bootstrap CSS. You don't have it in your post, so make sure you have that reference in your page.
After that, your issue is in your <li data-target="#myCarousel"... lines. Those need to reference your carousel div, so they should have data-target="#homeCarousel"
Once I fixed that your code worked for me.

scroll down and fixed the header with java script

I want the header will have a background when i scroll down but on the top the header will be transparent like this link I can fixed that header on top using bootstrap but i want it will be fixed when i scroll down.
this is my site layoutenter link description here
html code is`
Toggle navigation
CP
OUR PROGRAMMES
ABOUT
BLOG
LOGIN
APPLY
<!-- Cover Page Text Starts Here -->
<section class="first firstheading">
<Div class="psr">
<div class="container-fluid">
<h2 id="social">Gain International Experience</h2>
<p>We offer abroad internship programme for students and recent gradudates</p>
</div>
<ul>
<li>LONDON</li>
<li>DUBAI</li>
<li>INDIA</li>
<li>CHINA</li>
</ul>
</div>
</section>
<!-- End of Cover Page -->
<!-- Slider Starts Here -->
<section class="second-sc">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<div class="container-fluid second-menu">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="second-menu-active">LONDON</li>
<li data-target="#carousel-example-generic" data-slide-to="1">DUBAI</li>
<li data-target="#carousel-example-generic" data-slide-to="2">MUMBAI</li>
<li data-target="#carousel-example-generic" data-slide-to="3">BANGALORE</li>
<li data-target="#carousel-example-generic" data-slide-to="4">BEIGING</li>
</ol>
</div>
<div class="container-fluid dots">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="dots-active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
</div>
</div>
</section>`

Here is a function you can use this its simple and written in jquery
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 300) {
$('.overlay').addClass('cambio')
}else {
$('.overlay').removeClass('cambio')
}
})
})
and try this link http://jsfiddle.net/rcAev/17/