Galerie photo slider seulement sur plus de 600 px

Bonjour,

je voudrai faire un slider galerie photo en css mes je ne veux pas que sette galerie s'affiche sur la version mobile

voici mon code actuel :

<section id="banner">
				<header>
					<h2>Tel: <em> 06 ** 21 ** 59</em> | <em> 01 48 ** 60 **</em></h2>
				<!--	<a href="#" class="button">Voir plus</a> -->
				</header>
			</section>

avec pour css

	#banner {
		background-image: url("../images/banner.jpg");
		background-position: center center;
		background-size: cover;
		height: 28em;
		text-align: center;
		position: relative;
	}

		#banner header {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #212121;
			background: rgba(27, 27, 27, 0.75);
			color: #fff;
			padding: 1.5em 0;
		}

			#banner header h2 {
				display: inline-block;
				margin: 0;
				font-size: 1.25em;
				vertical-align: middle;
			}

				#banner header h2 em {
					opacity: 0.75;
				}

				#banner header h2 a {
					border-bottom-color: rgba(255, 255, 255, 0.5);
				}

					#banner header h2 a:hover {
						border-bottom-color: transparent;
					}

			#banner header .button {
				vertical-align: middle;
				margin-left: 1em;
			}

et je veux donc rajouter ceci :

ul{
     width:1800px;
     -webkit-animation: animNom 20s ease 0s infinite;
        -moz-animation: animNom 20s ease 0s infinite;
         -ms-animation: animNom 20s ease 0s infinite;
          -o-animation: animNom 20s ease 0s infinite;
             animation: animNom 20s ease 0s infinite;
}

@keyframes animNom {
from, 14%, to {transform:translateX(0px);}
16%, 30% {transform:translateX(-300px);}
32%, 46% {transform:translateX(-600px);}
48%, 62% {transform:translateX(-900px);}
64%, 78% {transform:translateX(-1200px);}
80%, 96% {transform:translateX(-1500px);}
}   

mes il faux savoir que j'ai aussi ceci pour ne pas afficher a moin de 600 px

			<div id="header">

				<!-- Logo -->
					<h1 id="logo" class="mob"> SDPCS <em> 94</em></h1>
					<h1 class="nonmob"><a href="index.php" >Stephane depannage plomberie chauffage service <em> 94</em></a></h1>


<script>
var w = document.documentElement.offsetWidth;
var mobile = document.getElementsByClassName("mob");
var nonmobile = document.getElementsByClassName("nonmob");
if (w > 600) {for(var i = 0; i < mobile.length; i++) {
    mobile[i].style.display = 'none';
}}
else {for(var i = 0; i < nonmobile.length; i++) {
    nonmobile[i].style.display = 'none';
}}
</script>

avec pour css

.mobile {
display:none;
}

.nonmobile {
display:block;
}


@media screen and (max-width: 600px){
.mobile {display:block;}
.nonmobile {display:none;}
}

comment je pourrai adapter tous sa ?

merci devance !