arakrail/pages/_lang/projects/index.vue

<template>
	<div class="page projects--page">
		<Hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<h2 class="title">{{staticData.t1}}</h2>
					<p>{{staticData.t2}}</p>
					<p>{{staticData.t3}}</p>
					
					<div class="projects">
						
						<div class="project">
							<div id="project1">
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
							</div>
							<div class="caption">
								<h4>پروژه ی فلان جا</h4>
								<p>1399/07/04</p>
							</div>
						</div>
						
						<div class="project">
							<div id="project2">
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
							</div>
							<div class="caption">
								<h4>پروژه ی فلان جا</h4>
								<p>1399/07/04</p>
							</div>
						</div>
						
						<div class="project">
							<div id="project3">
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
								<div class="imgBox">
									<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
									<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
								</div>
							</div>
							<div class="caption">
								<h4>پروژه ی فلان جا</h4>
								<p>1399/07/04</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s2">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<h2 class="title">{{staticData.t4}}</h2>
						<nuxt-link :to="{name: 'lang-contact',params:{lang: $route.params.lang}}" class="btn btn-reverse-fill">{{staticData.t5}}</nuxt-link>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
   if (process.client) require('slick-carousel')
   export default {
      computed: {
         staticData() {
            return this.$store.state.staticData.projects[this.$route.params.lang]
         }
      },
      mounted() {
         $('#project1').slick({
            slidesToShow: 1,
            centerMode: true,
            centerPadding: '150px',
            infinite: true,
            arrows: true
         })
         $('#project2').slick({
            slidesToShow: 1,
            centerMode: true,
            centerPadding: '150px',
            infinite: true,
            arrows: true
         })
         $('#project3').slick({
            slidesToShow: 1,
            centerMode: true,
            centerPadding: '150px',
            infinite: true,
            arrows: true
         })
      }
   }
</script>