Мобильная версияcss раздел «Полный обзор».
/*Reviews/Testimony Section*/
.reviews-section {
background-color: #0c1624; /* dark blue background */
color: white;
padding: 120px 20px;
/* text-align: right;
min-height: 250px; */
}
.reviews-container {
max-width: 1400px;
margin: -200px auto 0 auto; /* top -20px, horizontal auto, bottom 0 */
}
.review-title {
font-size: 45px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
font-family: 'Orbitron', sans-serif;
}
.review-title-gold {
color: #Efc900; /* bright gold */
}
.review-scroll-wrapper {
position: relative;
overflow: hidden;
cursor: grab;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
/* For Chrome, Safari */
&::-webkit-scrollbar {
display: none;
}
}
/* .review-scroll-wrapper:active {
cursor: grabbing;
} */
/* .card-holder {
display: flex;
gap: 30px;
width: max-content;
padding: 10px;
} */
/* Force Slick to respect your gap + card size */
.slick-track {
display: flex !important;
gap: 30px !important;
padding: 10px !important;
margin-left: 0 !important; /* prevent centering */
}
.slick-slide {
height: auto !important;
display: flex !important;
justify-content: center; /* optional */
}
/* Optional: if Slick wrapper centers */
#scrollCards.slick-slider {
text-align: left !important;
}
/* Optional: Hide flicker while Slick loads */
#scrollCards {
visibility: visible;
opacity: 1;
}
.review-scroll-wrapper::before,
.review-scroll-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 60px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.review-scroll-wrapper::before {
left: 0;
background: linear-gradient(to right, #0c1624, transparent);
}
.review-scroll-wrapper::after {
right: 0;
background: linear-gradient(to left, #0c1624, transparent);
}
.review-drag-zone {
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 100%;
z-index: 20;
cursor: grab;
pointer-events: auto;
}
.review-drag-zone:active {
cursor: grabbing;
}
.review-scroll-wrapper .slick-track {
cursor: default !important;
}
.review-card {
flex: 0 0 auto; /* Prevent shrinking, enforce fixed width */
width: 320px;
background-color: #0d191f;
border: 1px solid #Efc900;
border-radius: 20px;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-top: 40px;
color: white;
}
/* Main layout: pic, text, and icon */
.review-header {
display: flex;
align-items: flex-start;
position: relative;
}
/* Profile pic */
.linkedin-pic {
flex-shrink: 0;
}
.pic-prof {
width: 50px;
height: 50px;
border-radius: 50%;
}
/* Name + role beside image */
.review-info {
margin-left: 15px;
}
/* LinkedIn icon on top right */
.linkpic-url {
position: absolute;
top: 0;
right: 0;
}
.linkedin-icon {
width: 50px;
height: 50px;
}
/* Name */
.review-name {
font-size: 18px;
font-weight: bold;
margin: 0;
font-family: 'Times New Roman', sans-serif;
}
/* Role */
.review-role {
font-size: 12px;
font-weight: bold;
margin-top: 5px;
color: #Efc900;
font-family: 'Times New Roman', sans-serif;
}
/* Quote */
.review-text {
font-size: 16px;
margin-top: 25px;
color: #bbb;
font-family: 'Times New Roman', serif;
}
js
fetch('review.json')
.then(res => res.json())
.then(data => {
const track = document.getElementById('scrollCards');
track.innerHTML = '';
data.forEach(review => {
const card = document.createElement('div');
card.className = 'review-card';
card.innerHTML = `
${review.name}
${review.role}
${review.text}
`;
const cardWrapper = document.createElement('div'); // console.error('Review load failed:', err));
document.addEventListener('DOMContentLoaded', () => {
const wrapper = document.querySelector('.review-scroll-wrapper');
const dragZone = document.querySelector('.review-drag-zone');
// Wait until Slick is initialized
const interval = setInterval(() => {
const slickTrack = document.querySelector('#scrollCards .slick-track');
if (!slickTrack) return;
clearInterval(interval); //
Once track exists, proceed// Always block dragging by default
slickTrack.addEventListener('mousedown', (e) => {
const bounds = dragZone.getBoundingClientRect();
const inside =
e.clientX >= bounds.left &&
e.clientX = bounds.top &&
e.clientY {
const bounds = dragZone.getBoundingClientRect();
const touch = e.touches[0];
const inside =
touch.clientX >= bounds.left &&
touch.clientX = bounds.top &&
touch.clientY
Пример текущего кода показывает курсор в правильной области, однако я не могу перетаскивать с середины, и в этом примере также блокируют его с левой и правой стороны .. < /p>
Я не могу заставить его работать, что бы я ни пробовал, мне никогда не удалось перетаскивать только в центре (где можно увидеть цепь), иногда я мог перетаскивать только в направлении и правой, но никогда не стал, но никогда не стал, но никогда не стал, но никогда не стал, но никогда не стал, но никогда не стал, но никогда не стал, но никогда не смогу о том, что я не смогу, я никогда не был в направлении. Для другой библиотеки? Эта библиотека была рекомендована мне другом..review-drag-zone {
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 100%;
z-index: 20;
cursor: grab;
pointer-events: auto;
}
.review-drag-zone:active {
cursor: grabbing;
}
.review-scroll-wrapper .slick-track {
cursor: default !important;
}
Подробнее здесь: https://stackoverflow.com/questions/796 ... rag-from-l
