<link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
<title>pmi</title>
</head>
-<body>
+<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
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
</header>
<section class="pt-1v bg-navy text-white antialiased">
- <div class="container ">
-
+ <div id="app" class="container ">
+ <!--<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 pt-2v pr-1v pb-2v slide-txt">
+ <div class="column slide-content mobile-slider pt-2v pr-1v pb-2v slide-txt">
<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 overlap-bottom relative">
+ <div class="column slide-content slider-img-container overlap-bottom 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>
</body>
-</html>
\ No newline at end of file
+</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
if (!isRunning) {
isRunning = true;
+ let width = $('.slide-img').eq(index).width(),
+ height = $('.slide-img').eq(index).height();
+
let currentSlideIndex = $('.slide').eq(index),
nextSlideIndex = $('.slide').eq(nextindex),
currentText = $('.slide-txt').eq(index),
nextContainerImg = $('.slide-img').eq(nextindex);
let finishAnimation = function () {
- alert("finished");
+ // alert("finished");
currentSlideIndex.removeClass('active').eq(index);
+
+
+ /// 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;
};
// negative delay slow the end of this timeline
let tl = new TimelineMax({onComplete: finishAnimation});
+ // tl.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
+
tl.set(currentSlideIndex,{zIndex: 97});
tl.set(nextText,{opacity:1,x:0});
tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
- tl.from(nextContainerImg,1*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s
- tl.to(currentContainerImg,1*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay); // initial delay value 1.5s
+ tl.from(nextContainerImg,1.5*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s
+ tl.to(currentContainerImg,1.5*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay); // initial delay value 1.5s
tl.set(currentSlideIndex,{zIndex: 0});
tl.set(currentContainerImg,{x:0});
nextSlideIndex.addClass('active').eq(nextindex);
+ $('.arrow').off(); // disable click on arrows
index=nextindex;
} else {
margin-bottom: -10vw !important;
}
}
+@media only screen and (max-width: 500px) {
+ .slide-content.column {
+ margin-bottom: 0 !important;
+ }
+}
+@media only screen and (max-width: 500px) {
+ .slider-img-container {
+ display: none;
+ }
+}
+@media only screen and (max-width: 500px) {
+ .arrow {
+ display: none;
+ }
+}
+@media only screen and (max-width: 500px) {
+ .mobile-slider {
+ background-image: url("img/home-car.jpg");
+ }
+}
+@media only screen and (max-width: 500px) {
+ .container {
+ padding: 0 !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)
+ 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)
+ padding 0!important
projects / pmi.git / commitdiff