<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <meta name="csrf-token" content="RdQtGdocG4Zne4EasBBHujibhJgs798hXRa6D1dS">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../../css/app.css">
<link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
<title>pmi</title>
</head>
<body >
-<header class="site-header"><div class="container flex items-center py-8 relative z-20"><div class="mobile-menu-icon hidden"><img src="https://staging.pm-instrumentation.com/images/icon-burger-menu.svg" alt="Menu"></div> <div class="logo"><a href="/"><img src="https://staging.pm-instrumentation.com/images/pmi-logo.svg" alt="PM Instrumentation logo"></a></div> <div class="nav mx-auto flex items-center"><ul class="nav-primary"><li><a href="https://staging.pm-instrumentation.com/products">Products</a><ul><li class="nav-submenu-wrapper"><ul><li class="nav-submenu-title">Capteurs</li><li><a href="https://staging.pm-instrumentation.com/products/force">Force</a></li><li><a href="https://staging.pm-instrumentation.com/products/couple">Couple</a></li><li><a href="https://staging.pm-instrumentation.com/products/deplacement">Déplacement</a></li><li><a href="https://staging.pm-instrumentation.com/products/acceleration">Accélération</a></li><li><a href="https://staging.pm-instrumentation.com/products/inclinaison">Inclinaison</a></li><li><a href="https://staging.pm-instrumentation.com/products/pression">Pression</a></li></ul></li><li class="nav-submenu-wrapper"><ul><li class="nav-submenu-title">Systèmes de mesure</li><li><a href="https://staging.pm-instrumentation.com/products/roue">Roue dynamométrique</a></li><li><a href="https://staging.pm-instrumentation.com/products/cdfdo">Contrôle de fermeture d’ouvrants</a></li><li><a href="https://staging.pm-instrumentation.com/products/cdt">Contrôle de taraudage</a></li><li><a href="https://staging.pm-instrumentation.com/products/ct">Collecteurs tournant</a></li><li><a href="https://staging.pm-instrumentation.com/products/telemetrie">Télémétrie</a></li><li><a href="https://staging.pm-instrumentation.com/products/add">Acquisition de données</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/solutions">Solutions</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/solutions/energie">Énergie</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/aero">Aéronautique</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/ferroviaire">Ferroviaire</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/auto">Automobile</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/civil">Génie civil</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/industrie">Industrie</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/services">Services</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/services/location">Location</a></li><li><a href="https://staging.pm-instrumentation.com/services/calibration">Calibration</a></li><li><a href="https://staging.pm-instrumentation.com/services/developpement-oem">Développement OEM</a></li><li><a href="https://staging.pm-instrumentation.com/services/custom-design">Custom Design</a></li><li><a href="https://staging.pm-instrumentation.com/services/formation">Formation</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/support">Support</a></li><li><a href="https://staging.pm-instrumentation.com/societe">Société</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/societe/a-propos">Qui sommes nous ?</a></li><li><a href="https://staging.pm-instrumentation.com/societe/actualites">Actualités</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/contact">Contact</a></li></ul> <a href="#" class="text-white hover:text-blue"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xml:space="preserve" width="16" height="16" class="svg fill-current"><path d="M16,14.6l-5-5c0.7-1,1.1-2.2,1.1-3.5C12.1,2.7,9.4,0,6.1,0S0,2.7,0,6.1s2.7,6.1,6.1,6.1c1.3,0,2.5-0.4,3.5-1.1
+<header class="site-header"><div class="container flex items-center py-8 relative z-20">
+
+ <div class="mobile-menu-icon hidden">
+ <a href="#menu">
+ <img src="https://staging.pm-instrumentation.com/images/icon-burger-menu.svg" alt="Menu">
+ </a>
+ </div>
+
+
+ <div class="logo"><a href="/"><img src="https://staging.pm-instrumentation.com/images/pmi-logo.svg" alt="PM Instrumentation logo"></a></div> <div class="nav mx-auto flex items-center" id="menu"><ul class="nav-primary"><li><a href="https://staging.pm-instrumentation.com/products">Products</a><ul><li class="nav-submenu-wrapper"><ul><li class="nav-submenu-title">Capteurs</li><li><a href="https://staging.pm-instrumentation.com/products/force">Force</a></li><li><a href="https://staging.pm-instrumentation.com/products/couple">Couple</a></li><li><a href="https://staging.pm-instrumentation.com/products/deplacement">Déplacement</a></li><li><a href="https://staging.pm-instrumentation.com/products/acceleration">Accélération</a></li><li><a href="https://staging.pm-instrumentation.com/products/inclinaison">Inclinaison</a></li><li><a href="https://staging.pm-instrumentation.com/products/pression">Pression</a></li></ul></li><li class="nav-submenu-wrapper"><ul><li class="nav-submenu-title">Systèmes de mesure</li><li><a href="https://staging.pm-instrumentation.com/products/roue">Roue dynamométrique</a></li><li><a href="https://staging.pm-instrumentation.com/products/cdfdo">Contrôle de fermeture d’ouvrants</a></li><li><a href="https://staging.pm-instrumentation.com/products/cdt">Contrôle de taraudage</a></li><li><a href="https://staging.pm-instrumentation.com/products/ct">Collecteurs tournant</a></li><li><a href="https://staging.pm-instrumentation.com/products/telemetrie">Télémétrie</a></li><li><a href="https://staging.pm-instrumentation.com/products/add">Acquisition de données</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/solutions">Solutions</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/solutions/energie">Énergie</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/aero">Aéronautique</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/ferroviaire">Ferroviaire</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/auto">Automobile</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/civil">Génie civil</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/industrie">Industrie</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/services">Services</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/services/location">Location</a></li><li><a href="https://staging.pm-instrumentation.com/services/calibration">Calibration</a></li><li><a href="https://staging.pm-instrumentation.com/services/developpement-oem">Développement OEM</a></li><li><a href="https://staging.pm-instrumentation.com/services/custom-design">Custom Design</a></li><li><a href="https://staging.pm-instrumentation.com/services/formation">Formation</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/support">Support</a></li><li><a href="https://staging.pm-instrumentation.com/societe">Société</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/societe/a-propos">Qui sommes nous ?</a></li><li><a href="https://staging.pm-instrumentation.com/societe/actualites">Actualités</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/contact">Contact</a></li></ul> <a href="#" class="text-white hover:text-blue"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xml:space="preserve" width="16" height="16" class="svg fill-current"><path d="M16,14.6l-5-5c0.7-1,1.1-2.2,1.1-3.5C12.1,2.7,9.4,0,6.1,0S0,2.7,0,6.1s2.7,6.1,6.1,6.1c1.3,0,2.5-0.4,3.5-1.1
l5,5L16,14.6z M1.9,6.1c0-2.3,1.8-4.1,4.1-4.1s4.1,1.8,4.1,4.1s-1.8,4.1-4.1,4.1S1.9,8.3,1.9,6.1z"></path></svg></a></div> <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue"><span class="cart-header-title">My Selection</span> <span class="cart-header-icon">0</span></div> <div class="cart-header-popout"><div class="cart-header-popout-title flex justify-between items-center px-1v py-1v"><span>
My Selection
</span> <a href="#" class="close-cart-popout text-white hover:text-blue"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" class="svg fill-current"><path d="M26 1.4L24.6 0 13 11.6 1.4 0 0 1.4 11.6 13 0 24.6 1.4 26 13 14.4 24.6 26l1.4-1.4L14.4 13z"></path></svg></a></div> <div class="cart-header-popout-content text-navy font-body p-1v pb-0"><div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url("https://staging.pm-instrumentation.com/storage/products/3.png"); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
</header>
<section class="pt-1v bg-navy text-white antialiased">
- <div id="app" class="container ">
- <!--<hello></hello>-->
+ <div id="app" class="container slider-container" data-cart-items="{}">
+ <hello></hello>
<div class="slider-control">
<img class="arrow prev home-arrow-left" src="img/home-arrow-left.svg" alt="">
<img class="arrow next home-arrow-right" src="img/home-arrow-right.svg" disabled="disabled" alt="">
<div class="slider relative">
<div data-slide="1" class="column-wrapper absolute slide active hide ">
- <div class="column slide-content mobile-slider pt-2v pr-1v pb-2v slide-txt">
+ <div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
+
+ <div class="mobile-bg" style="background-image: url(img/home-car.jpg)"></div>
+
<div class="text-block text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">Wheel Force Transducer</h2>
<div class="text-block-body">
</div>
</div>
</div>
- <div class="column slide-content slider-img-container overlap-bottom relative">
+ <div class="column slide-content slider-img-container overlap-bottom slide-img-container relative">
<div class="slide-mask">
<div class="bg-image h-full bg-cover bg-no-repeat slide-img ">
<!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
<div data-slide="2" class="column-wrapper absolute slide hide ">
<div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
+
+ <div class="mobile-bg" style="background-image: url(https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg)"></div>
+
<div class="text-block text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">slide suivante</h2>
<div class="text-block-body">
</div>
</div>
</div>
- <div class="column slide-content overlap-bottom relative">
+ <div class="column slide-content overlap-bottom slide-img-container relative">
<div class="slide-mask">
<div class="bg-image h-full bg-cover bg-no-repeat slide-img">
<!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
<div data-slide="3" class="column-wrapper absolute slide hide">
<div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
+
+ <div class="mobile-bg" style="background-image: url(https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg)"></div>
+
<div class="text-block text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">Lorem ipsum</h2>
<div class="text-block-body">
</div>
</div>
</div>
- <div class="column slide-content overlap-bottom relative">
+ <div class="column slide-content overlap-bottom slide-img-container relative">
<div class="slide-mask">
<div class="bg-image h-full bg-cover bg-no-repeat slide-img">
<!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
<div data-slide="4" class="column-wrapper absolute slide hide">
<div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
+
+ <div class="mobile-bg" style="background-image: url(https://www.w3schools.com/w3css/img_lights.jpg)"></div>
+
<div class="text-block text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">Lorrefdcem ipsfdcum</h2>
<div class="text-block-body">
</div>
</div>
</div>
- <div class="column slide-content overlap-bottom relative">
+ <div class="column slide-content overlap-bottom slide-img-container relative">
<div class="slide-mask">
<div class="bg-image h-full bg-cover bg-no-repeat slide-img">
<!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="slider.js"></script>
-<script src="../../js/app.js"></script>
+<!--<script src="../../js/app.js"></script>-->
</body>
-</html>
-<script>
- import CartItem from "../../../resources/js/components/CartItem";
- export default {
- components: {CartItem}
- }
-</script>
-<script>
- import Hello from "../../../resources/js/components/hello";
- export default {
- components: {Hello}
- }
-</script>
\ No newline at end of file
+</html>
\ No newline at end of file
slideLength = $(".slide").length,
prevBtn = $(".home-arrow-left"),
nextBtn = $(".home-arrow-right"),
- Delay = 1,
- isRunning = false;
+ Delay = 1;
let getImg = new Image();
getImg.src = $('.img-slider').attr("src");
function GotoSlide(nextindex, direction){
- if (!isRunning) {
- isRunning = true;
-
let width = $('.slide-img').eq(index).width(),
height = $('.slide-img').eq(index).height();
// alert("finished");
currentSlideIndex.removeClass('active').eq(index);
+ enableArrows(); // when animation is finished we reactivate click event
- /// AJOUTER DANS UNE FONCTION
- $('.arrow').on('click',function () {
- resize();
- if($(this).is('.next')){
- direction = 1;
- }
- else{
- direction=-1;
- }
- let nextindex = (index +direction + slideLength)% slideLength;
- GotoSlide(nextindex,direction);
- }); // when animation is finished we reactivate click event
TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
- isRunning = false;
+ // isRunning = false;
};
console.log(nextindex, direction);
nextSlideIndex.addClass('active').eq(nextindex);
- $('.arrow').off(); // disable click on arrows
+ disableArrows(); // disable click on arrows until animation finishes
index=nextindex;
- } else {
- console.warn("animation still running!");
- return false;
- }
+ // console.log(tl.duration()); // timeline duration
}
-$('.arrow').on('click',function () {
- resize();
- if($(this).is('.next')){
- direction = 1;
- }
- else{
- direction=-1;
- }
- let nextindex = (index +direction + slideLength)% slideLength;
- GotoSlide(nextindex,direction);
-});
\ No newline at end of file
+//
+// arrowNavigation();
+//
+// function arrowNavigation() {
+// $('.arrow').on('click', function () {
+// resize();
+// if ($(this).is('.next')) {
+// direction = 1;
+// }
+// else {
+// direction = -1;
+// }
+// let nextindex = (index + direction + slideLength) % slideLength;
+// GotoSlide(nextindex, direction);
+// });
+// }
+
+ function nextSlide() {
+ let direction = 1;
+
+ let nextindex = (index + direction + slideLength) % slideLength;
+ GotoSlide(nextindex, direction);
+ }
+ function prevSlide(){
+ let direction = -1;
+
+ let nextindex = (index + direction + slideLength) % slideLength;
+ GotoSlide(nextindex, direction);
+ }
+
+ function enableArrows() {
+ $('.arrow.next').on('click', nextSlide);
+ $('.arrow.prev').on('click', prevSlide);
+ }
+ function disableArrows() {
+ $('.arrow.next').off();
+ $('.arrow.prev').off();
+ }
+
+ enableArrows();
\ No newline at end of file
position: absolute;
bottom: 60px;
}
+@media (max-width: 769px) {
+ .slider-indicator {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+}
.slider-indicator ul {
display: flex;
align-items: center;
}
+@media (max-width: 769px) {
+ .slider-indicator ul {
+ padding-left: 0 !important;
+ }
+}
.slider-position {
width: 6px;
height: 6px;
img {
max-width: unset !important;
}
-@media only screen and (max-width: 768px) {
- .slide-content.column {
- margin-bottom: -10vw !important;
- }
-}
-@media only screen and (max-width: 500px) {
- .slide-content.column {
- margin-bottom: 0 !important;
+@media (max-width: 769px) {
+ .slide-img-container {
+ display: none;
}
}
-@media only screen and (max-width: 500px) {
- .slider-img-container {
+.mobile-bg {
+ position: absolute;
+ background-repeat: no-repeat;
+ background-size: cover;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0.3;
+}
+@media only screen and (min-width: 769px) {
+ .mobile-bg {
display: none;
}
}
-@media only screen and (max-width: 500px) {
- .arrow {
- display: none;
+@media only screen and (max-width: 769px) {
+ .slider-container {
+ padding: 0 !important;
}
}
-@media only screen and (max-width: 500px) {
- .mobile-slider {
- background-image: url("img/home-car.jpg");
+@media only screen and (max-width: 769px) {
+ .slide-txt {
+ margin-bottom: 0 !important;
}
}
-@media only screen and (max-width: 500px) {
- .container {
- padding: 0 !important;
+@media (max-width: 769px) {
+ .text-block {
+ padding: 0 5vw !important;
}
}
.slider-indicator
position absolute
bottom 60px
+ @media (max-width 769px)
+ left: 50%
+ transform: translateX(-50%)
ul
display flex
- align-items center
+ align-items: center;
+ @media (max-width 769px)
+ padding-left: 0!important
+
.slider-position
width: 6px
height 6px
height 10px
background: white
transition all 400ms ease-in-out
+
//.slider-control
// @media only screen and (max-width: 768px)
// display none
img
max-width unset!important
-.slide-content.column
- @media only screen and (max-width: 768px)
- margin-bottom: -10vw!important
- @media only screen and (max-width: 500px)
- margin-bottom: 0!important
-.slider-img-container
- @media only screen and (max-width: 500px)
- display none
-.arrow
- @media only screen and (max-width: 500px)
+//.slide-content.column
+// @media only screen and (max-width: 768px)
+// margin-bottom: -10vw!important
+// @media only screen and (max-width: 500px)
+// margin-bottom: 0!important
+.slide-img-container
+ @media (max-width: 769px)
display none
+//.arrow
+// @media only screen and (max-width: 768px)
+// display none
+
+.mobile-bg
+ position: absolute
+ background-repeat no-repeat
+ background-size cover
+ top: 0
+ left: 0
+ right: 0
+ bottom: 0
+ opacity: 0.3
+
+ @media only screen and (min-width: 769px)
+ display: none
-.mobile-slider
- @media only screen and (max-width: 500px)
- background-image url("img/home-car.jpg")
-.container
- @media only screen and (max-width: 500px)
+.slider-container
+ @media only screen and (max-width: 769px)
padding 0!important
+.slide-txt
+ @media only screen and (max-width: 769px)
+ margin-bottom 0!important
+
+.text-block
+ @media (max-width: 769px)
+ padding 0 5vw!important
\ No newline at end of file
projects / pmi.git / commitdiff