Carousel.swift

import SwiftUI

fileprivate class CarouselConfig: ObservableObject {
  @Published var cardWidth: CGFloat = 0
  @Published var cardCount: Int = 0
  @Published var selected: Int = 0
}

struct Carousel<Cards: View>: View {
  let cards: Cards

  private var config: CarouselConfig

  @GestureState private var isDetectingLongPress = false

  @State private var offset: CGFloat = 0
  @State private var gestureOffset: CGFloat = 0

  private let spacing: CGFloat

  init(
    cardWidth: CGFloat, selected: Int = 0, spacing: CGFloat = 20,
    @ViewBuilder cards: @escaping () -> Cards
  ) {
    self.config = CarouselConfig()
    self.config.cardWidth = cardWidth
    self.config.selected = selected
    
    self.spacing = spacing

    self.cards = cards()
  }

  func offset(for index: Int, geometry: GeometryProxy) -> CGFloat {
    return (geometry.size.width - self.config.cardWidth) / 2 - CGFloat(self.config.selected)
      * (self.config.cardWidth + spacing)
  }

  var body: some View {
    GeometryReader {
      geometry in
      HStack(alignment: .center, spacing: self.spacing) {
        cards
          .environmentObject(config)
      }
      .offset(x: offset + gestureOffset)
      .onAppear {
        self.offset = self.offset(for: self.config.selected, geometry: geometry)
      }
      .gesture(
        DragGesture().updating($isDetectingLongPress) { currentState, gestureState, transaction in
          self.gestureOffset = currentState.translation.width

        }.onEnded { value in
          self.offset += self.gestureOffset
          self.gestureOffset = 0
          if value.translation.width < -(geometry.size.width / 6) {
            self.config.selected = min(self.config.selected + 1, self.config.cardCount - 1)
          } else if value.translation.width > (geometry.size.width / 6) {
            self.config.selected = max(0, self.config.selected - 1)
          }
          withAnimation(.easeOut(duration: 0.3)) {
            print(self.config.selected)
            self.offset = self.offset(for: self.config.selected, geometry: geometry)
          }
        })
    }
  }
}

struct CarouselCard<Content: View>: View {
  @EnvironmentObject fileprivate var config: CarouselConfig

  let content: Content
  @State private var cardId: Int? = nil
  
  var isActive: Bool {
    // The cards are numbered in reverse order
    return cardId == config.cardCount - config.selected - 1
  }

  init(@ViewBuilder content: @escaping () -> Content) {
    self.content = content()
  }

  var body: some View {
    content
      .frame(width: config.cardWidth)
      .scaleEffect(isActive ? 1 : 0.8)
      .animation(.easeInOut, value: isActive)
      .zIndex(isActive ? 1 : 0)
      .onAppear {
        self.cardId = self.config.cardCount
        self.config.cardCount += 1
      }
  }
}

struct Carousel_Previews: PreviewProvider {
  static var previews: some View {
    Carousel(cardWidth: 200, spacing: 10) {
      CarouselCard {
        Text("First Card")
          .frame(width: 200, height: 200)
          .background(Color.blue)
      }
      CarouselCard {
        Text("Second Card")
          .frame(width: 150, height: 300)
          .background(Color.red)
      }
      CarouselCard {
        Text("Third Card")
          .frame(width: 200, height: 250)
          .background(Color.yellow)
      }
      CarouselCard {
        Text("Fourth Card")
          .frame(width: 200, height: 150)
          .background(Color.green)
      }
    }
  }
}

amazing example. Have you solved problems with paths?

It seems when using selected it's not recognises new arrays

Great horizontal slider! Thank you very much for sharing your implementation.

This works really well but I'm running up against a Modifying state during view update, this will cause undefined behavior. inside the DragGesture updating block, did you ever figure out a change to dismiss that warning?